├── .gitignore ├── .stylelintrc.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── gulpfile.js ├── legacy ├── bd │ ├── bdsettings.scss │ ├── beardcard.scss │ ├── customcss.scss │ ├── emotes.scss │ └── publicservers.scss ├── chat │ ├── attachments.scss │ ├── chat.scss │ ├── dividers.scss │ ├── embeds.scss │ ├── form.scss │ ├── images.scss │ ├── messagegroup.scss │ ├── messages │ │ └── mentions.scss │ ├── systemicons.scss │ ├── threads.scss │ ├── toolbar.scss │ └── welcome.scss ├── classes.scss ├── index.scss ├── misc │ ├── buttons.scss │ ├── contextmenu.scss │ ├── contributors.scss │ ├── elevations.scss │ ├── inputanimation.scss │ ├── layeranimation.scss │ ├── lightmode.scss │ ├── links.scss │ ├── loading.scss │ ├── miscanims.scss │ ├── pictureinpicture.scss │ ├── privatecall.scss │ ├── scrollers.scss │ ├── titlebar.scss │ └── tooltip.scss ├── modals │ ├── createguild.scss │ ├── createinvite.scss │ ├── customstatus.scss │ ├── deprecated.scss │ ├── downloadapps.scss │ ├── generic.scss │ ├── givenitro.scss │ ├── install.scss │ ├── invite.scss │ ├── joinmodal.scss │ ├── keyboardshortcuts.scss │ ├── quickswitcher.scss │ ├── reactions.scss │ ├── regionselect.scss │ ├── screenshare.scss │ ├── upload.scss │ ├── uploaddrop.scss │ ├── userprofile.scss │ └── webinvite.scss ├── old │ ├── btn-confirm.scss │ ├── contributors.scss │ ├── guilds.scss │ ├── header-toolbar.scss │ ├── help.scss │ ├── invite-button.scss │ ├── misc.scss │ ├── newguilds.txt │ ├── pm-invite.scss │ ├── premium-settings.scss │ ├── searchbar.scss │ ├── settings.scss │ ├── sp.scss │ └── specialmessages.scss ├── plugins │ ├── betterformattingredux.scss │ ├── charcounter.scss │ ├── citador.scss │ ├── dateviewer.scss │ ├── directdownload.scss │ ├── edituploads.scss │ ├── googletranslate.scss │ ├── membercount.scss │ ├── newreplyer.scss │ ├── permissionviewer.scss │ ├── quoter.scss │ ├── readall.scss │ ├── replyer.scss │ ├── sendbutton.scss │ ├── serverfolders.scss │ ├── serversearch.scss │ ├── serversorter.scss │ └── statuseverywhere.scss ├── popouts │ ├── addgame.scss │ ├── addrole.scss │ ├── attach.scss │ ├── autocomplete.scss │ ├── emojipicker.scss │ ├── generic.scss │ ├── gifpicker.scss │ ├── inbox.scss │ ├── list.scss │ ├── mentioneveryone.scss │ ├── messages.scss │ ├── option.scss │ ├── rtcconnection.scss │ ├── search.scss │ ├── server.scss │ ├── statuspicker.scss │ ├── stickerpicker.scss │ ├── toasts.scss │ ├── userpopout.scss │ └── voiceconnection.scss ├── sections │ ├── accountcontainer.scss │ ├── activityfeed.scss │ ├── call.scss │ ├── channelheader.scss │ ├── channelnotices.scss │ ├── channels.scss │ ├── discovery.scss │ ├── friends.scss │ ├── guilds.scss │ ├── lfg.scss │ ├── library.scss │ ├── memberlist.scss │ ├── private-channels.scss │ ├── searchresults.scss │ └── store.scss └── settings │ ├── accessibility.scss │ ├── account.scss │ ├── auditlog.scss │ ├── checkbox.scss │ ├── connectedaccounts.scss │ ├── datepicker.scss │ ├── dropdown.scss │ ├── emojis.scss │ ├── games.scss │ ├── nitro.scss │ ├── overlay.scss │ ├── profile.scss │ ├── radiogroup.scss │ ├── serverboost.scss │ ├── settings.scss │ ├── settingsicons.scss │ ├── sidebarview.scss │ ├── slider.scss │ ├── switches.scss │ └── videopreview.scss ├── package-lock.json ├── package.json ├── release ├── Nox.theme.css ├── README.md └── import.css ├── resources └── images │ ├── logo.png │ ├── logo.png_original │ ├── main_chat.png │ ├── status_picker.gif │ ├── user_popout.png │ ├── user_popout2.png │ ├── user_profile.png │ └── user_profile2.png └── src ├── elevations.scss ├── index.scss └── styles ├── channels ├── accountcontainer │ ├── activity.scss │ ├── index.scss │ ├── spotify.scss │ ├── statuspicker.scss │ └── voiceconnection.scss ├── header.scss └── index.scss ├── chat ├── dividers.scss ├── embeds.scss ├── expressionpicker.scss ├── form.scss ├── forums.scss ├── inbox.scss ├── index.scss ├── messagebars.scss ├── messagegroup.scss ├── pins.scss ├── search.scss ├── threads.scss └── titlebar.scss ├── contextmenus.scss ├── friendslist ├── dm.scss └── index.scss ├── guilds ├── homeicon.scss ├── hover+unread.scss └── index.scss ├── members └── index.scss ├── scrollers.scss ├── settings └── sidebarview │ ├── closebutton.scss │ ├── content │ ├── index.scss │ └── noxcard.scss │ └── sidebar │ ├── index.scss │ └── item.scss ├── titlebar.scss ├── tooltips.scss └── userprofiles ├── cardbackground.scss ├── index.scss ├── modal.scss ├── popout.scss └── textcolors.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | *.css.map 3 | node_modules 4 | src/old 5 | changes.md -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-sass-guidelines", 4 | "stylelint-config-property-sort-order-smacss" 5 | ], 6 | "plugins": [ 7 | "stylelint-order" 8 | ], 9 | "rules": { 10 | "indentation": [4, {"except": ["value"], "severity": "warning"}], 11 | "selector-type-case": ["lower", {"ignoreTypes": ["foreignObject"]}], 12 | "no-missing-end-of-source-newline": null, 13 | "string-quotes": "double", 14 | "selector-class-pattern": null, 15 | "selector-max-id": null, 16 | "order/properties-alphabetical-order": null 17 | } 18 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016-2017 Lilian Tedone, 2017-2019 Zack Rauen 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nox - [Download](https://betterdiscord.app/Download?id=3) 2 | 3 | A beautiful dark material theme for Discord. This is the rebrand and continuation of Beard's Material Design Theme which has been discontinued. 4 | 5 | For support and to report bugs, please visit the [support server](https://bit.ly/NoxServer). 6 | 7 | # Variables 8 | 9 | These variables allow you to customize the theme to your preferences. 10 | 11 | - `--nox-accent` - The accent color you want for the theme. Default: `#3F85FF` 12 | - `--nox-notification-color` - Color for the unread indicator in guilds list. Default: `#FFFFFF` 13 | - `--nox-notification-width` - Width of the circle around guilds. Default: `3px` 14 | - `--nox-important-notification` - Background color for mention/ping badges. Default: `#F04747` 15 | - ~~`--nox-channels-scrollbar` - Set this to `none` to remove the scrollbar in the channel list.~~ 16 | - ~~`--nox-settings-scrollbar` - Set this to `none` to remove the scrollbar in settings.~~ 17 | - ~~`--nox-settings-time` - Length of the animation to open settings. Default: `500ms`~~ 18 | - `--nox-level1` - One of the main grays used throughout the theme. Default: `#303030` 19 | - `--nox-level2` - One of the main grays used throughout the theme. Default: `#212121` 20 | - `--nox-level3` - One of the main grays used throughout the theme. Default: `#141414` 21 | 22 | # Addons 23 | 24 | Addons are currently non-working but may be added back eventually. 25 | ~~There are a number of addons and customizations available for the theme that can be found on the [support server](http://bit.ly/BMTserver).~~ 26 | 27 | # Previews 28 | 29 | ## Main Chat 30 | ![Main Chat](https://zerebos.github.io/Nox/resources/images/main_chat.png) 31 | 32 | ## User Popout 33 | ![User Popout](https://zerebos.github.io/Nox/resources/images/user_popout.png) ![User Popout with Nitro Theme](https://zerebos.github.io/Nox/resources/images/user_popout2.png) 34 | 35 | ## User Profile 36 | ![User Profile](https://zerebos.github.io/Nox/resources/images/user_profile.png) ![User Profile with Nitro Theme](https://zerebos.github.io/Nox/resources/images/user_profile2.png) 37 | 38 | ## Status Picker 39 | ![Status Picker](https://zerebos.github.io/Nox/resources/images/status_picker.gif) 40 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const fs = require("fs"); 3 | const path = require("path"); 4 | const dartSass = require("sass"); 5 | const sass = require("gulp-sass")(dartSass); 6 | const rename = require("gulp-rename"); 7 | const insert = require("gulp-insert"); 8 | const wait = require("gulp-wait"); 9 | const globImporter = require("node-sass-glob-importer"); 10 | 11 | const META = `/*//META{"name":"Nox","description":"A theme for Discord loosely based on Google's Material Design Guidelines.","author":"Lilian Tedone & Zerebos","version":"1.0.0"}*//**/ 12 | 13 | `; 14 | 15 | const LICENSE = `/* 16 | * Copyright (c) 2016-2017 Lilian Tedone, 2017-2020 Zack Rauen 17 | * 18 | * Permission is hereby granted, free of charge, to any person obtaining a copy 19 | * of this software and associated documentation files (the "Software"), to deal 20 | * in the Software without restriction, including without limitation the rights 21 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 22 | * copies of the Software, and to permit persons to whom the Software is 23 | * furnished to do so, subject to the following conditions: 24 | * 25 | * The above copyright notice and this permission notice shall be included in all 26 | * copies or substantial portions of the Software. 27 | * 28 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 29 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 30 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 31 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 32 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 33 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 34 | * SOFTWARE. 35 | */ 36 | 37 | `; 38 | 39 | // Credit to: 40 | // https://coderwall.com/p/fhgu_q/inlining-images-with-gulp-sass 41 | 42 | const sassInlineImage = function(options) { 43 | options = options || {}; 44 | 45 | const svg = function(buffer) { 46 | const svg = buffer.toString() 47 | .replace(/\n/g, '') 48 | .replace(/\r/g, '') 49 | .replace(/\#/g, '%23') 50 | .replace(/\"/g, "'"); 51 | 52 | return 'data:image/svg+xml;utf8,' + svg; 53 | }; 54 | 55 | const img = function(buffer, ext) { 56 | return 'data:image/' + ext + ';base64,' + buffer.toString('base64'); 57 | }; 58 | 59 | const base = options.base || process.cwd(); 60 | return function(file) { 61 | const relativePath = './' + file.getValue(); 62 | const filePath = path.resolve(base, relativePath); 63 | const ext = filePath.split('.').pop(); 64 | const data = fs.readFileSync(filePath); 65 | const buffer = new Buffer(data); 66 | const str = ext === 'svg' ? svg(buffer, ext) : img(buffer, ext); 67 | return new dartSass.SassString(str); 68 | }; 69 | }; 70 | 71 | 72 | const sassOptions = { 73 | functions: 74 | { 75 | "inline-image($file)": sassInlineImage() 76 | }, 77 | importer: globImporter(), 78 | outputStyle: "compressed" 79 | }; 80 | 81 | gulp.task("import", function () { 82 | return gulp.src("./src/index.scss") 83 | .pipe(sass(sassOptions).on("error", sass.logError)) 84 | .pipe(rename({basename: "import", extname: ".css"})) 85 | .pipe(insert.prepend(LICENSE)) 86 | .pipe(gulp.dest("./release/")); 87 | }); 88 | 89 | gulp.task("sass", function () { 90 | return gulp.src("./src/index.scss") 91 | .pipe(wait(200)) 92 | .pipe(sass.sync(sassOptions).on("error", sass.logError)) 93 | .pipe(rename({basename: "Nox.theme", extname: ".css"})) 94 | .pipe(insert.prepend(META + LICENSE)) 95 | .pipe(gulp.dest("Z:/Programming/BetterDiscordStuff/themes")); 96 | }); 97 | 98 | gulp.task("sass-watch", function() { 99 | return gulp.watch(["./src/**/*.scss"]).on("all", gulp.series("sass")); 100 | }); -------------------------------------------------------------------------------- /legacy/bd/beardcard.scss: -------------------------------------------------------------------------------- 1 | #bd-settingspane-container .bda-slist li[data-name="Nox"] .bda-description { 2 | display:none; 3 | } 4 | #bd-settingspane-container .bda-slist li[data-name="Nox"] .scroller-wrap{ 5 | position:relative; 6 | } 7 | #bd-settingspane-container .bda-slist li[data-name="Nox"] .scroller-wrap::before{ 8 | content:"Accent color"; 9 | position:relative; 10 | left:0; 11 | color:var(--nox-white); 12 | background:var(--nox-accent); 13 | display:inline-block; 14 | padding:30px; 15 | margin:5px; 16 | border-radius:2px; 17 | margin-top:10px; 18 | box-shadow:0 2px 15px rgba(0,0,0,.2); 19 | width: auto; 20 | } 21 | #bd-settingspane-container .bda-slist li[data-name="Nox"] .scroller-wrap::after{ 22 | content:"Notification color"; 23 | position:relative; 24 | left:0; 25 | color:#000; 26 | background:var(--nox-notification-color); 27 | display:inline-block; 28 | padding:30px; 29 | margin:5px; 30 | border-radius:2px; 31 | box-shadow:0 2px 15px rgba(0,0,0,.2); 32 | margin-top:10px; 33 | width: auto; 34 | } 35 | 36 | #Nox-card .bd-author, 37 | #Nox-card .bd-version { 38 | font-size: 0; 39 | } 40 | 41 | #Nox-card .bd-version::after { 42 | content: "v" var(--nox-version) " "; 43 | font-size: 14px; 44 | } 45 | 46 | #Nox-card .bd-author::after { 47 | content: "Lilian Tedone & Zack Rauen"; 48 | font-size: 14px; 49 | } -------------------------------------------------------------------------------- /legacy/bd/customcss.scss: -------------------------------------------------------------------------------- 1 | #bd-customcss-detach-container { 2 | background: var(--nox-level3); 3 | } 4 | 5 | .contentRegion-3HkfJJ #bd-customcss-attach-controls::after { 6 | width: 100%; 7 | padding: 10px; 8 | content:"To add custom settings to the theme, copy the following\A code in your custom CSS and replace the things you want\A to change:\A \A :root {\A\9 --nox-accent: #7289DA !important;\A\9 --nox-notification-color: #FFFFFF !important;\A\9 --nox-important-notification: #F04747 !important;\A}\A\A Don't forget to save/update when you're done!\A\A To see all the variables in the theme, just go to bit.ly/NoxTheme. "; 9 | background: var(--nox-level2); 10 | margin-top: 10px; 11 | display: block; 12 | border-radius: 2px; 13 | font-family: Consolas, Liberation Mono, Menlo, Courier, monospace; 14 | white-space: pre; 15 | color: var(--nox-white); 16 | margin-bottom: 0px; 17 | width:auto; 18 | } 19 | 20 | #bd-customcss-detach-controls-buttons button:last-of-type::after { 21 | width: 30px; 22 | height: 30px; 23 | content: ""; 24 | background: var(--nox-accent); 25 | margin-top: -23px; 26 | display: block; 27 | position: absolute; 28 | left: 120px; 29 | border-radius: 50%; 30 | box-shadow: 0px 2px 10px rgba(0, 0, 0, .3), 40px 0 var(--nox-notification-color), 40px 2px 10px rgba(0, 0, 0, .3); 31 | transition: all 100ms ease; 32 | pointer-events: none 33 | } 34 | 35 | #bd-customcss-detach-controls-buttons button:hover:last-of-type::after { 36 | -ms-transform: translate(0, 1px); 37 | transform: translate(0, 1px); 38 | transition: all 150ms ease-in-out; 39 | } 40 | 41 | #bd-customcss-detach-controls-buttons button:active:last-of-type::after { 42 | -ms-transform: translate(0, -2px); 43 | transform: translate(0, -2px); 44 | transition: all 50ms ease; 45 | } 46 | .contentRegion-3HkfJJ .CodeMirror, .contentRegion-3HkfJJ .CodeMirror-scroll{ 47 | max-height: calc(95vh - 250px); 48 | min-height: calc(95vh - 250px); 49 | } 50 | 51 | .contentRegion-3HkfJJ #bd-customcss-attach-controls::before{ 52 | content:""; 53 | position:absolute; 54 | color:var(--nox-white); 55 | background:var(--nox-accent); 56 | display:block; 57 | width:40px; 58 | height:40px; 59 | margin:5px; 60 | border-radius:50%; 61 | margin-top:10px; 62 | box-shadow:0 2px 15px rgba(0,0,0,.3),65px -12px 0 -10px var(--nox-important-notification),65px -10px 15px -8px rgba(0,0,0,.2),50px 0 0 var(--nox-notification-color),50px 2px 15px rgba(0,0,0,.3); 63 | order:5; 64 | margin-top:25px; 65 | transform:translate(0,-15px); 66 | right:110px; 67 | z-index:2; 68 | } 69 | #bd-customcss-attach-controls{ 70 | height:auto!important; 71 | margin-bottom:60px; 72 | } 73 | 74 | #bd-customcss-attach-controls .checkbox-3kaeSU .checkboxInner-3yjcPe input+span::before{ 75 | border-color:var(--nox-level3)!important; 76 | } 77 | 78 | 79 | 80 | /*cuscomcss*/ 81 | 82 | .contentRegion-3HkfJJ .CodeMirror, 83 | .contentRegion-3HkfJJ .cm-s-material .CodeMirror-gutters, 84 | #bd-customcss-detach-container .CodeMirror, 85 | #bd-customcss-detach-container .cm-s-material .CodeMirror-gutters{ 86 | background:var(--nox-level3)!important; 87 | } 88 | .contentRegion-3HkfJJ #bd-customcss-attach-controls, 89 | #bd-customcss-detach-container #bd-customcss-attach-controls{ 90 | background:var(--nox-level3)!important; 91 | box-shadow:0 1px rgba(255,255,255,.05) inset; 92 | margin-bottom:0!important; 93 | } 94 | .standardSidebarView-E9Pc3j #bd-customcss-attach-controls button, 95 | .bd-detached-css-editor #bd-customcss-attach-controls button{ 96 | background:var(--nox-level2)!important; 97 | border:none!important; 98 | } 99 | .standardSidebarView-E9Pc3j #bd-customcss-attach-controls button:hover, 100 | .bd-detached-css-editor #bd-customcss-attach-controls button:hover{ 101 | background:#272727!important; 102 | } 103 | .standardSidebarView-E9Pc3j #bd-customcss-attach-controls button:active, 104 | .bd-detached-css-editor #bd-customcss-attach-controls button:active{ 105 | background:#101010!important; 106 | transition:0ms; 107 | } 108 | .standardSidebarView-E9Pc3j #editor-detached h3{ 109 | color:var(--nox-white3) 110 | } 111 | 112 | 113 | 114 | .cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { 115 | color: var(--nox-white); 116 | } 117 | .standardSidebarView-E9Pc3j #bd-customcss-attach-controls button, 118 | .bd-detached-css-editor #bd-customcss-attach-controls button { 119 | border-radius: 3px!important; 120 | margin-right: 5px; 121 | } 122 | 123 | #bd-customcss-detach-controls-button span { 124 | font-size: 12px!important; 125 | } 126 | 127 | #bd-customcss-editor, 128 | #bd-customcss-editor .ace-monokai .ace_gutter { 129 | background: var(--nox-level3); 130 | } 131 | -------------------------------------------------------------------------------- /legacy/bd/emotes.scss: -------------------------------------------------------------------------------- 1 | .tipsy { 2 | pointer-events: none; 3 | animation: opacity 100ms ease; 4 | opacity: 1!important; 5 | } 6 | 7 | .tipsy-inner { 8 | background-color: var(--nox-level1) !important; 9 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2)!important; 10 | padding: 6px 10px; 11 | border-radius: 3px; 12 | font-size: 13px; 13 | z-index: 1000000000000000000; 14 | pointer-events: none; 15 | animation: opacity 80ms ease; 16 | } 17 | 18 | .tipsy-inner { 19 | border-radius: 3px 20 | } 21 | 22 | 23 | // .emoji.jumboable { 24 | // width: 33px!important; 25 | // height: 33px!important; 26 | // } -------------------------------------------------------------------------------- /legacy/bd/publicservers.scss: -------------------------------------------------------------------------------- 1 | #bd-pub-li, 2 | #bd-pub-button { 3 | background: none; 4 | } 5 | 6 | #bd-pub-li:hover #bd-pub-button { 7 | background: rgba(255, 255, 255, 0.1); 8 | } 9 | 10 | #pubs-container{ 11 | background:var(--nox-level2); 12 | } 13 | 14 | 15 | #pubs-header button { 16 | background: #101010; 17 | border-radius: 5px; 18 | margin-right: 10px; 19 | } 20 | 21 | #pubs-sterm { 22 | background: #151515; 23 | border-radius: 5px; 24 | margin-right: 5px; 25 | } 26 | 27 | .bd-dropdown-list, 28 | #pubs-cat-select { 29 | margin-right: 20px!important 30 | } 31 | 32 | .bd-dropdown-list ul li, 33 | .server-row { 34 | background: var(--nox-level2)!important; 35 | z-index: 5!important; 36 | cursor: pointer; 37 | transition: all 100ms ease; 38 | } 39 | 40 | .bd-dropdown-list ul li:nth-child(odd), 41 | .server-row:nth-child(odd) { 42 | background: #282828!important 43 | } 44 | 45 | .server-info button { 46 | background: var(--nox-level3)!important; 47 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); 48 | border-radius: 100px!important; 49 | border: 3px solid var(--nox-level2); 50 | transition: all 150ms cubic-bezier(.08, .23, .09, 1.5); 51 | } 52 | 53 | .server-info button:hover { 54 | -ms-transform: scale(1.1); 55 | transform: scale(1.1); 56 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); 57 | } 58 | 59 | .server-official { 60 | text-shadow: none 61 | } 62 | 63 | .server-row.server-pinned { 64 | background: var(--nox-level2)!important; 65 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); 66 | z-index: 6!important; 67 | } 68 | 69 | #pubs-container { 70 | border-radius: 5px!important; 71 | background:var(--nox-level2); 72 | } 73 | 74 | #pubs-header input{ 75 | color:var(--nox-white); 76 | background:transparent; 77 | padding-left:10px; 78 | padding-right:50px; 79 | border-radius:0; 80 | border-bottom:2px solid var(--nox-white1); 81 | margin-right:-30px; 82 | z-index:1; 83 | } 84 | #pubs-header input:focus{ 85 | border-bottom:2px solid var(--nox-accent); 86 | } 87 | #pubs-header #pubs-searchbtn{ 88 | font-size:0; 89 | padding-left:25px; 90 | background:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6Ii8+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=)50% no-repeat; 91 | z-index:3; 92 | position:relative; 93 | opacity:0.9; 94 | } 95 | #pubs-header #pubs-searchbtn:hover{ 96 | opacity:1; 97 | } 98 | #pubs-header{ 99 | padding-left:20px!important; 100 | } 101 | #pubs-header { 102 | border-radius: 10px 10px 0 0!important; 103 | padding: 10px; 104 | background: var(--nox-level2); 105 | } 106 | #pubs-container{ 107 | animation:scale 600ms cubic-bezier(.15,.51,.39,1.21), opacity 300ms ease; 108 | } 109 | .server-info span { 110 | color: rgba(255, 255, 255, 0.7) 111 | } 112 | 113 | #pubs-footer { 114 | border-radius: 0 0 10px 10px!important; 115 | padding: 10px; 116 | background: var(--nox-level2); 117 | } -------------------------------------------------------------------------------- /legacy/chat/attachments.scss: -------------------------------------------------------------------------------- 1 | .container-1ov-mD .attachment-33OFj0 { 2 | background: var(--nox-level2); 3 | border: none; 4 | } 5 | 6 | .container-1YxwTf .applicationTile-1Goy1W { 7 | background: var(--nox-level2); 8 | border-radius: 3px !important; 9 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 10 | } 11 | 12 | .container-1YxwTf .applicationTile-1Goy1W:hover { 13 | background: var(--nox-level3); 14 | } -------------------------------------------------------------------------------- /legacy/chat/dividers.scss: -------------------------------------------------------------------------------- 1 | // Unread message divider 2 | .messagesWrapper-1sRNjr .divider-3_HH5L.isUnread-3Ef-o9 { 3 | margin-bottom: 8px; 4 | margin-top: 23px; 5 | // top: 5px; 6 | border-top: thin solid #f04747; 7 | } 8 | 9 | // Move pill to outside message bg 10 | .unreadPill-2HyYtt, .unreadPillCap-3_K2q2 { 11 | right: -3px; 12 | } 13 | 14 | // Fix spacing issues from unread message divider 15 | .message-2qnXI6 + .isUnread-3Ef-o9:not(.hasContent-1cNJDh) { 16 | margin-top: -1px; 17 | } 18 | .isUnread-3Ef-o9:not(.hasContent-1cNJDh) + .message-2qnXI6 { 19 | margin-top: -8px; 20 | } 21 | 22 | // Make unread dates readable 23 | .messagesWrapper-1sRNjr .divider-3_HH5L.isUnread-3Ef-o9 .content-1o0f9g { 24 | background: #2b2b2b; 25 | } 26 | 27 | // Remove date dividers borders 28 | .messagesWrapper-1sRNjr .divider-3_HH5L { 29 | border: none; 30 | } 31 | 32 | // Adjust date divider labels 33 | .messagesWrapper-1sRNjr .divider-3_HH5L .content-1o0f9g { 34 | background: rgba(0, 0, 0, .1); 35 | color: var(--nox-white3); 36 | border-radius: 3px; 37 | padding: 3px 10px; 38 | font-weight: 500; 39 | } -------------------------------------------------------------------------------- /legacy/chat/images.scss: -------------------------------------------------------------------------------- 1 | /*embed images*/ 2 | .embed .embed-thumbnail-gifv video, 3 | .attachment-image img, 4 | .attachment-image .image, 5 | .embed .image, 6 | .embed-thumbnail.embed-thumbnail-image[href*=".gif"], 7 | .embed .embedThumbnail-2Y84-K img, 8 | .imageWrapper-2p5ogY.imageZoom-1n-ADA, 9 | .embedImage-2W1cML { 10 | border-radius: 3px; 11 | // /*-webkit-filter: drop-shadow(0px 3px 4px rgba(0, 0, 0, 0.4));*/ 12 | box-shadow: 0 3px 7px rgba(0,0,0,.4); 13 | transition: 200ms cubic-bezier(.2,0,0,1)!important; 14 | background-color:#212121; 15 | } 16 | .embed .embed-thumbnail-gifv video:hover, 17 | .embed .image:not(iframe):hover, 18 | .embed .embedThumbnail-2Y84-K img:not(iframe):hover, 19 | .embed-thumbnail-video:not(iframe):hover, 20 | .attachment-image .image:not(iframe):hover, 21 | .embed-thumbnail.embed-thumbnail-image[href*=".gif"]:hover, 22 | .embed-thumbnail.embed-thumbnail-image .image:not(iframe):hover, 23 | .imageWrapper-2p5ogY.imageZoom-1n-ADA:hover, 24 | .embedImage-2W1cML:hover { 25 | box-shadow: 0 5px 15px rgba(0,0,0,.5); 26 | // /* -webkit-filter: drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.5)); */ 27 | } 28 | .embed .embed-thumbnail-gifv video:active, 29 | .embed .image:not(iframe):active, 30 | .embed .embedThumbnail-2Y84-K img:not(iframe):active, 31 | .embed-thumbnail-video:not(iframe):active, 32 | .attachment-image .image:not(iframe):active, 33 | .embed-thumbnail.embed-thumbnail-image[href*=".gif"]:active, 34 | .embed-thumbnail.embed-thumbnail-image .image:not(iframe):active, 35 | .imageWrapper-2p5ogY.imageZoom-1n-ADA:active, 36 | .embedImage-2W1cML:active { 37 | box-shadow: 0 7px 15px rgba(0,0,0,.6); 38 | transition: 0ms ease!important; 39 | // /*-webkit-filter: drop-shadow(0px 7px 7px rgba(0, 0, 0, 0.5));*/ 40 | } 41 | .embed-thumbnail.embed-thumbnail-image[href*=".gif"] .image{ 42 | box-shadow: none!important; 43 | } 44 | /*/embed images*/ 45 | 46 | .gifTag-31zFY8 { 47 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgIDxkZWZzPiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHYyNHoiIGlkPSJhIi8+ICAgIDwvZGVmcz4gICAgPGNsaXBQYXRoIGlkPSJiIj4gICAgICAgIDx1c2Ugb3ZlcmZsb3c9InZpc2libGUiIHhsaW5rOmhyZWY9IiNhIi8+ICAgIDwvY2xpcFBhdGg+ICAgIDxwYXRoIGNsaXAtcGF0aD0idXJsKCNiKSIgZD0iTTExLjUgOUgxM3Y2aC0xLjV6TTkgOUg2Yy0uNiAwLTEgLjUtMSAxdjRjMCAuNS40IDEgMSAxaDNjLjYgMCAxLS41IDEtMXYtMkg4LjV2MS41aC0ydi0zSDEwVjEwYzAtLjUtLjQtMS0xLTF6bTEwIDEuNVY5aC00LjV2NkgxNnYtMmgydi0xLjVoLTJ2LTF6Ii8+PC9zdmc+)!important; 48 | background-size: 110%; 49 | background-repeat: no-repeat; 50 | background-color: var(--nox-white); 51 | background-position: 50%; 52 | border-radius: 4px; 53 | border: 2px solid #000; 54 | height: 17px!important; 55 | width: 30px!important; 56 | } 57 | 58 | .imageAccessory-3uSIjZ { 59 | z-index: 1 60 | } -------------------------------------------------------------------------------- /legacy/chat/messages/mentions.scss: -------------------------------------------------------------------------------- 1 | // Change basic styles 2 | .markup-2BOw-j .mention, 3 | .markup-2BOw-j .wrapper-3WhCwL { 4 | position: relative; 5 | color: var(--nox-accent); 6 | background: transparent!important; 7 | z-index: 1; 8 | } 9 | 10 | // Change hover style 11 | .markup-2BOw-j .mention:hover, 12 | .markup-2BOw-j .wrapper-3WhCwL:hover { 13 | color:var(--nox-white)!important 14 | } 15 | 16 | // Add faded accent bg 17 | .markup-2BOw-j .mention::after, 18 | .markup-2BOw-j .wrapper-3WhCwL::after { 19 | width:100%; 20 | height:100%; 21 | content:""; 22 | position:absolute; 23 | left:0; 24 | top:0; 25 | z-index: -1; 26 | opacity:0.15; 27 | background:var(--nox-accent); 28 | } 29 | 30 | // Lets role mentions and BRC color the bg appropriately 31 | .markup-2BOw-j .mention[style]::after{ 32 | background:currentColor; 33 | } 34 | 35 | // Hover still goes to accent 36 | .markup-2BOw-j .mention:hover::after{ 37 | opacity:1; 38 | background:var(--nox-accent); 39 | } -------------------------------------------------------------------------------- /legacy/chat/threads.scss: -------------------------------------------------------------------------------- 1 | .content-98HsJk { 2 | background: var(--nox-level3); 3 | } 4 | 5 | .threadSidebar-1o3BTy { 6 | margin-left: 4px; 7 | } 8 | 9 | .threadSidebar-1o3BTy, 10 | .chat-2ZfjoI.threadSidebarOpen-vdkwIh { 11 | border-radius: 0; 12 | } 13 | 14 | .chat-2ZfjoI, .threadSidebar-1o3BTy { 15 | background: var(--nox-level1); 16 | } 17 | 18 | .theme-dark .form-2fGMdU:before { 19 | background: none; 20 | } 21 | 22 | .threadSidebar-1o3BTy .form-2fGMdU { 23 | padding: 0; 24 | } 25 | 26 | .cozy-3raOZG.hasThread-2k82W0:after { 27 | left: -2.7rem !important; 28 | border-color: var(--nox-white2); 29 | border-bottom-left-radius: 2px; 30 | } 31 | .spine--Wla_O { 32 | color: var(--nox-white2); 33 | } 34 | 35 | .container-3hZ-gs { 36 | background: var(--nox-level2); 37 | } 38 | -------------------------------------------------------------------------------- /legacy/chat/welcome.scss: -------------------------------------------------------------------------------- 1 | .messages-3amgkR .welcomeMessage-3_Mcht .anchor-3Z-8Bb, 2 | .messages-3amgkR .welcomeMessage-3_Mcht .h1-1IDj26 { 3 | color: var(--nox-accent); 4 | } 5 | 6 | .welcomeMessage-3_Mcht .icon-2shpbb { 7 | filter: grayscale(100%) brightness(90%); 8 | } -------------------------------------------------------------------------------- /legacy/misc/elevations.scss: -------------------------------------------------------------------------------- 1 | /*Guilds*/ 2 | .wrapper-1Rf91z { 3 | z-index: 6; 4 | } 5 | /*Channels*/ 6 | .sidebar-2K8pFh { 7 | overflow: visible; // allow the shadow to show 8 | } 9 | 10 | .sidebar-2K8pFh .container-PNkimc { 11 | z-index: 4; 12 | } 13 | /*Guild name*/ 14 | .sidebar-2K8pFh .panels-j1Uci_ { 15 | z-index: 5; 16 | } 17 | /*User bar*/ 18 | .container-2Thooq { 19 | z-index: 5; 20 | } 21 | // Blocked bar 22 | .wrapper-39oAo3 { 23 | z-index: 5; 24 | } 25 | /*Voice*/ 26 | .container-1UB9sr { 27 | z-index: 5; 28 | } 29 | /*Top bar*/ //headerBar-UHpsPw 30 | .container-3gCOGc .friendsTableHeader-32yE7d, 31 | .chat-2ZfjoI .title-3qD0b-, 32 | .headerBar-UHpsPw { 33 | z-index: 5; 34 | } 35 | 36 | /* store */ 37 | .root-26DmKJ { 38 | z-index: 5; 39 | } 40 | 41 | /*Message popout*/ 42 | .popout-3sVMXz.popoutBottomRight-2JrySt.noArrow-3BYQ0Z.noShadow-321ZPm { 43 | z-index: 4 !important; 44 | } 45 | /*Chat*/ 46 | .chat-2ZfjoI .messagesWrapper-3lZDfY { 47 | // z-index: 3; 48 | } 49 | /*Message bar*/ 50 | .chat-2ZfjoI form .channelTextArea-1LDbYG { 51 | z-index: 6; 52 | } 53 | /*Friends search bar*/ 54 | .privateChannels-1nO12o::before { 55 | z-index: 5; 56 | } 57 | /*Channel members*/ 58 | .membersWrap-2h-GB4, 59 | .theme-dark .search-results-wrap { 60 | z-index: 4; 61 | } 62 | 63 | .wrapper-39oAo3, 64 | .membersWrap-2h-GB4, 65 | .theme-dark .search-results-wrap, 66 | .wrapper-1Rf91z, 67 | .sidebar-2K8pFh .container-PNkimc, 68 | .sidebar-2K8pFh .panels-j1Uci_, 69 | .container-2Thooq, 70 | .container-1UB9sr, 71 | .container-3gCOGc .friendsTableHeader-32yE7d, 72 | .chat-2ZfjoI .title-3qD0b-, 73 | .headerBar-UHpsPw, 74 | .popout-3sVMXz.popoutBottomRight-2JrySt.noArrow-3BYQ0Z.noShadow-321ZPm, 75 | .privateChannels-1nO12o, 76 | .privateChannels-1nO12o::before, 77 | .chat-2ZfjoI form .channelTextArea-1LDbYG { 78 | box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); 79 | } 80 | 81 | 82 | /* No rounded section */ 83 | #app-mount .base-3dtUhz { 84 | border-radius: 0; 85 | } -------------------------------------------------------------------------------- /legacy/misc/inputanimation.scss: -------------------------------------------------------------------------------- 1 | .inputWrapper-31_8H8{ 2 | overflow: hidden; 3 | } 4 | 5 | .inputWrapper-31_8H8 textarea, 6 | .inputWrapper-31_8H8 textarea:hover, 7 | .inputWrapper-31_8H8 input, 8 | .inputWrapper-31_8H8 input:hover{ 9 | background:transparent!important; 10 | border:none!important; 11 | box-shadow:0 2px 0 rgba(255,255,255,.05),-660px 2px 0 var(--nox-accent)!important; 12 | margin-bottom:2px!important; 13 | transition:200ms ease!important; 14 | border-radius:0!important; 15 | } 16 | 17 | .inputWrapper-31_8H8 textarea:focus, 18 | .inputWrapper-31_8H8 input:focus{ 19 | background:transparent!important; 20 | border:none!important; 21 | transition:300ms cubic-bezier(0,0,0,1)!important; 22 | box-shadow:0 2px 0 rgba(255,255,255,.05),0 2px 0 var(--nox-accent)!important; 23 | } -------------------------------------------------------------------------------- /legacy/misc/layeranimation.scss: -------------------------------------------------------------------------------- 1 | /*settings animation*/ 2 | .layer-3QrUeG.animating{ 3 | pointer-events: initial!important; 4 | will-change:transform,opacity; 5 | } 6 | .modal-1UGdnR, 7 | .inner-1JeGVc, 8 | html, 9 | body, 10 | .layer-3QrUeG>section, 11 | .theme-dark .standardSidebarView-E9Pc3j{ 12 | backface-visibility:hidden; 13 | backface-visibility:hidden; 14 | } 15 | .layer-3QrUeG{ 16 | backface-visibility:hidden; 17 | backface-visibility:hidden; 18 | transform:none!important; 19 | transition:all 0.3s cubic-bezier(.4,0,0,1); 20 | } 21 | /* .layer-3QrUeG[style]{ 22 | transform:none!important; 23 | } */ 24 | .layer-3QrUeG.animating-rRxada { 25 | transform:none!important; 26 | } 27 | .layer-3QrUeG.stop-animations:first-of-type{ 28 | transform:scale(0.95)!important; 29 | opacity:0!important; 30 | } 31 | 32 | .layer-3QrUeG+.layer-3QrUeG{ 33 | transform:scale(1.1)!important; 34 | opacity:0!important; 35 | pointer-events: none!important; 36 | transition: all 300ms cubic-bezier(.4,0,0,1), opacity 150ms ease; 37 | } 38 | 39 | .layer-3QrUeG.stop-animations~.layer-3QrUeG{ 40 | pointer-events: initial!important; 41 | transform:none!important; 42 | opacity:1!important; 43 | animation:pubslayer var(--nox-settings-time) cubic-bezier(.4,0,0,1); 44 | } 45 | 46 | #pubslayerroot .layer-3QrUeG .standardSidebarView-E9Pc3j{ 47 | animation:pubslayer 0.5s cubic-bezier(.4,0,0,1); 48 | transform:none; 49 | opacity:1; 50 | } 51 | @keyframes pubslayer{ 52 | 0%{ 53 | transform:scale(1.1); 54 | opacity:0; 55 | } 56 | } 57 | /*/settings animation*/ -------------------------------------------------------------------------------- /legacy/misc/links.scss: -------------------------------------------------------------------------------- 1 | .modal-3HD5ck a, 2 | .messages-wrapper .messages .message-group a { 3 | color: #2196F3!important; 4 | transition: color 300ms ease; 5 | border-bottom: 2px solid transparent; 6 | } 7 | .modal-3HD5ck a:hover, 8 | .messages-wrapper .messages .message-group a:hover { 9 | color: #90CAF9!important; 10 | text-decoration: none; 11 | } -------------------------------------------------------------------------------- /legacy/misc/loading.scss: -------------------------------------------------------------------------------- 1 | @keyframes dot { 2 | from { 3 | transform: scale(0)translate(-40px, 40px); 4 | } 5 | to { 6 | transform: scale(1)translate(-15px, 15px); 7 | } 8 | } 9 | ._3X2_kkZ9 ._35kyMuFV, 10 | .spinner-2enMB9 .spinnerItem-3GlVyU, 11 | .spinner-wandering-cubes .spinner-item, 12 | .spinner-2enMB9 .wanderingCubesItem-WPXqao { 13 | animation: none; 14 | border-radius: 50%; 15 | margin-top: 11px; 16 | -ms-transform: scale(0.8); 17 | transform: scale(0.8); 18 | background: rgba(225, 225, 225, 0.7); 19 | display: none; 20 | } 21 | 22 | //spinner-2enMB9 da-spinner spinner-2okOH9 da-spinner 23 | .spinner, 24 | .spinningCircle-2NAjGW, 25 | ._3X2_kkZ9, 26 | .spinner-2enMB9:not(.ellipsis-19qdx6) { 27 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjI1IDI1IDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9ImNpcmN1bGFyIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5sb2FkZXIgeyAgcG9zaXRpb246IHJlbGF0aXZlOyAgbWFyZ2luOiAwIGF1dG87ICB3aWR0aDogMTAwcHg7fS5sb2FkZXI6YmVmb3JlIHsgIGNvbnRlbnQ6ICcnOyAgZGlzcGxheTogYmxvY2s7ICBwYWRkaW5nLXRvcDogMTAwJTt9LmNpcmN1bGFyIHsgIC13ZWJraXQtYW5pbWF0aW9uOiByb3RhdGUgMnMgbGluZWFyIGluZmluaXRlOyAgICAgICAgICBhbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7ICBoZWlnaHQ6IDEwMCU7ICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7ICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7ICB3aWR0aDogMTAwJTsgIHBvc2l0aW9uOiBhYnNvbHV0ZTsgIHRvcDogMDsgIGJvdHRvbTogMDsgIGxlZnQ6IDA7ICByaWdodDogMDsgIG1hcmdpbjogYXV0bzsgIHN0cm9rZTogI2ZmZjt9LnBhdGggeyAgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7ICAtd2Via2l0LWFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgICAgICAgICAgYW5pbWF0aW9uOiBkYXNoIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGUsIGNvbG9yIDZzIGVhc2UtaW4tb3V0IGluZmluaXRlOyAgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7fUAtd2Via2l0LWtleWZyYW1lcyByb3RhdGUgeyAgMTAwJSB7ICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgfX1Aa2V5ZnJhbWVzIHJvdGF0ZSB7ICAxMDAlIHsgICAgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICB9fUAtd2Via2l0LWtleWZyYW1lcyBkYXNoIHsgIDAlIHsgICAgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyAgICBzdHJva2UtZGFzaG9mZnNldDogMDsgIH0gIDUwJSB7ICAgIHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7ICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAtMzVweDsgIH0gIDEwMCUgeyAgICBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyAgICBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyAgfX1Aa2V5ZnJhbWVzIGRhc2ggeyAgMCUgeyAgICBzdHJva2UtZGFzaGFycmF5OiAxLCAyMDA7ICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwOyAgfSAgNTAlIHsgICAgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyAgfSAgMTAwJSB7ICAgIHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7ICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7ICB9fSAgPC9zdHlsZT48Y2lyY2xlIGNsYXNzPSJwYXRoIiAgY3g9IjUwIiBjeT0iNTAiIHI9IjIwIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjwvc3ZnPg==); 28 | opacity: 0.8; 29 | background-repeat: no-repeat!important; 30 | background-position:50%!important; 31 | background-size: contain; 32 | } 33 | .spinningCircle-2NAjGW svg{ 34 | display:none; 35 | } 36 | 37 | .spinner-2okOH9 .inner-1gJC7_, 38 | .spinner-2okOH9 .spinnerItem-3GlVyU { 39 | display: none; 40 | } 41 | 42 | .spinner-2enMB9 .wanderingCubesItem-WPXqao:last-child { 43 | margin-left: 22px; 44 | } 45 | 46 | .spinner-2enMB9.spinner-3a9zLT { 47 | transform: scale(0.8); 48 | } 49 | 50 | .typing-1KJk_j .spinner-2enMB9, 51 | .typing-2GQL18 .spinner-2enMB9 { 52 | background: none; 53 | margin: 0; 54 | opacity: 1; 55 | } -------------------------------------------------------------------------------- /legacy/misc/miscanims.scss: -------------------------------------------------------------------------------- 1 | /*-----GENERAL KEYFRAMES-----*/ 2 | 3 | @keyframes opacity { 4 | from { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | @keyframes scale { 10 | from { 11 | transform: scale(0); 12 | } 13 | } 14 | 15 | @keyframes height { 16 | from { 17 | height: 0; 18 | } 19 | } 20 | 21 | @keyframes width { 22 | from { 23 | width: 0; 24 | } 25 | } 26 | 27 | @keyframes min-width { 28 | from { 29 | min-width: 0; 30 | } 31 | } 32 | 33 | @keyframes visibility { 34 | from { 35 | visibility: hidden; 36 | } 37 | } 38 | 39 | @keyframes box-shadow { 40 | from { 41 | box-shadow:none; 42 | } 43 | } 44 | 45 | @keyframes slide-up { 46 | from { 47 | transform: translate(0, 100%); 48 | } 49 | } 50 | 51 | @keyframes slide-down { 52 | from { 53 | transform: translate(0, -100%); 54 | } 55 | } 56 | 57 | @keyframes slide-left { 58 | from { 59 | transform: translate(-100); 60 | } 61 | } 62 | 63 | @keyframes slide-right { 64 | from { 65 | transform: translate(100%); 66 | } 67 | } 68 | 69 | @keyframes flash { 70 | 0% { 71 | box-shadow: 0 2px 10px rgba(240, 71, 71, .3), 0 0 0 2px rgba(240, 70, 70, .4); 72 | } 73 | 70% { 74 | box-shadow: 0 0px 20px 15px rgba(240, 71, 71, .3), 0 0 0 6px rgba(240, 70, 70, .7); 75 | } 76 | 100% { 77 | box-shadow: 0 0px 20px 15px rgba(240, 71, 71, 0), 0 0 0 6px rgba(240, 70, 70, 0); 78 | } 79 | } 80 | 81 | @keyframes display { 82 | from { 83 | display:none; 84 | } 85 | } 86 | 87 | /*-----/GENERAL KEYFRAMES-----*/ 88 | 89 | 90 | 91 | @keyframes streaming-flash { 92 | 0% { 93 | box-shadow: 0 0px 10px rgba(89, 54, 149, 0), 0 0 0 0px rgba(89, 54, 149, .4); 94 | } 95 | 50% { 96 | box-shadow: 0 0px 20px 15px rgba(89, 54, 149, .3), 0 0 0 4px rgba(89, 54, 149, .7); 97 | } 98 | 100% { 99 | box-shadow: 0 0px 25px 16px rgba(89, 54, 149, 0), 0 0 3px 8px rgba(89, 54, 149, 0); 100 | } 101 | } 102 | 103 | -------------------------------------------------------------------------------- /legacy/misc/pictureinpicture.scss: -------------------------------------------------------------------------------- 1 | .pictureInPictureWindow-1B5qSe{ 2 | z-index:100000000; 3 | } 4 | .pictureInPictureWindow-1B5qSe .elevationHigh-3A9Xbf{ 5 | overflow: hidden; 6 | box-shadow: 0 2px 15px 0 rgba(0,0,0,.3); 7 | transition:all 200ms ease; 8 | animation: scale 500ms cubic-bezier(.2,0,0,1.2), opacity 500ms ease; 9 | } 10 | .pictureInPictureWindow-1B5qSe .elevationHigh-3A9Xbf:hover{ 11 | box-shadow: 0 7px 20px 0 rgba(0,0,0,.5); 12 | } 13 | .video-1FfuMD { 14 | background: var(--nox-level2); 15 | } 16 | .pictureInPictureWindow-1B5qSe .video-3alTtx, 17 | .pictureInPictureWindow-1B5qSe .overlay-1NmNEg, 18 | .pictureInPictureWindow-1B5qSe .overlay-1NmNEg, 19 | .pictureInPictureWindow-1B5qSe .background-ujHpbY, 20 | .pictureInPictureWindow-1B5qSe .overlayTop-3tbQ8v, 21 | .pictureInPictureVideo-20ZvXn, 22 | .pictureInPictureWindow-1B5qSe .media-2uAkTf{ 23 | border-radius: 3px; 24 | overflow: hidden; 25 | } 26 | .pictureInPictureWindow-1B5qSe .overlay-1NmNEg{ 27 | border: 0px; 28 | border-radius: 3px; 29 | box-shadow: inset 0 200px 150px -200px rgba(0,0,0,.9),inset 0 -200px 150px -200px rgba(0,0,0,.9); 30 | cursor:all-scroll; 31 | } 32 | 33 | .pictureInPictureWindow-1B5qSe .overlayRight-3LLinM{ 34 | padding:0; 35 | margin-right: 18px!important; 36 | } 37 | .pictureInPictureWindow-1B5qSe .overlayRight-3LLinM{ 38 | position: relative; 39 | } 40 | .pictureInPictureWindow-1B5qSe .overlayRight-3LLinM::after{ 41 | content:""; 42 | background:#fff; 43 | border-radius:50%; 44 | display:block; 45 | width:100%; 46 | height:100%; 47 | position:absolute; 48 | opacity:0; 49 | transform:scale(1.4); 50 | transition:300ms ease; 51 | pointer-events: none; 52 | } 53 | .pictureInPictureWindow-1B5qSe .overlayRight-3LLinM:active::after{ 54 | opacity:0.2; 55 | transform:scale(1.4); 56 | animation:scale 100ms cubic-bezier(.4,0,0,1),opacity 100ms ease; 57 | } 58 | .pictureInPictureWindow-1B5qSe .overlayTop-3tbQ8v{ 59 | padding-bottom: 10px 60 | } 61 | .pictureInPictureWindow-1B5qSe .overlayTop-3tbQ8v .horizontal-1ae9ci>.flex-1xMQg5:last-child .iconButton-l-Ul_r{ 62 | opacity: 1!important 63 | } 64 | .channel-2-6Ybo:hover{ 65 | text-decoration: none; 66 | } 67 | .pictureInPictureWindow-1B5qSe .overlayTop-3tbQ8v .horizontal-1ae9ci>.flex-1xMQg5:last-child{ 68 | opacity: .6; 69 | transition: 200ms ease; 70 | } 71 | .pictureInPictureWindow-1B5qSe .overlayTop-3tbQ8v .horizontal-1ae9ci>.flex-1xMQg5:last-child:hover{ 72 | opacity: 1 73 | } -------------------------------------------------------------------------------- /legacy/misc/titlebar.scss: -------------------------------------------------------------------------------- 1 | .wordmark-2u86JB { 2 | padding: 0; 3 | font-size: 12px; 4 | } 5 | 6 | .wordmark-2u86JB::before { 7 | content: ""; 8 | display: block; 9 | width: 70px; 10 | height: 17px; 11 | margin: 3px 0; 12 | background-image: url(inline-image("resources/images/logo.png")); 13 | background-repeat: no-repeat; 14 | background-position: center center; 15 | background-size: contain; 16 | } 17 | 18 | .wordmark-2u86JB svg { 19 | display: none; 20 | } 21 | 22 | .titleBar-1it3bQ { 23 | background: #191919 !important; 24 | } 25 | 26 | .typeWindows-2-g3UY { 27 | margin-top: 0; 28 | padding-top: 4px; 29 | } -------------------------------------------------------------------------------- /legacy/misc/tooltip.scss: -------------------------------------------------------------------------------- 1 | .tooltip-2QfLtc { 2 | background-color: var(--nox-level1) !important; 3 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2)!important; 4 | padding: 3px 4px; 5 | border-radius: 3px; 6 | font-size: 13px; 7 | z-index: 1000000000000000000; 8 | pointer-events: none; 9 | animation: opacity 80ms ease; 10 | } 11 | 12 | .tooltipPointer-3ZfirK { 13 | visibility: hidden; 14 | } -------------------------------------------------------------------------------- /legacy/modals/createinvite.scss: -------------------------------------------------------------------------------- 1 | /* Create/join invite */ 2 | 3 | .form.deprecated .btn-primary, 4 | .form.deprecated .btn-primary:hover, 5 | .form .btn-primary:hover, 6 | .form .btn-primary { 7 | background: var(--nox-accent); 8 | } 9 | 10 | .form header, 11 | .form .control-group label a:hover, 12 | .form .control-group label a { 13 | color: var(--nox-accent); 14 | } 15 | 16 | .form.deprecated .form-actions, 17 | .form .form-actions { 18 | background: #252525; 19 | border: none; 20 | } 21 | .form.deprecated .form-inner, 22 | .form.deprecated .form-header{ 23 | background:transparent; 24 | } 25 | 26 | .create-guild-container.deprecated .join-server .link-container input:hover { 27 | border: none!important; 28 | border-bottom: 2px solid var(--nox-white1)!important 29 | } 30 | 31 | .create-guild-container.deprecated .join-server .link-container input:focus { 32 | border: none!important; 33 | border-bottom: 2px solid var(--nox-accent)!important 34 | } 35 | 36 | .create-guild-container.deprecated .join-server .link-container label { 37 | color: var(--nox-white4); 38 | margin-top: 10px 39 | } 40 | 41 | .create-guild-container.deprecated .form-actions .btn-default { 42 | color: var(--nox-white6); 43 | } 44 | 45 | .create-guild-container.deprecated .form-actions .btn-default::before { 46 | background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMjAgMTFINy44M2w1LjU5LTUuNTlMMTIgNGwtOCA4IDggOCAxLjQxLTEuNDFMNy44MyAxM0gyMHYtMnoiLz48L3N2Zz4=); 47 | background-size: 100%; 48 | opacity: .6; 49 | background-position: 0 50%; 50 | } 51 | .create-guild-container.deprecated .form-actions .btn-default:active::before { 52 | background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMjAgMTFINy44M2w1LjU5LTUuNTlMMTIgNGwtOCA4IDggOCAxLjQxLTEuNDFMNy44MyAxM0gyMHYtMnoiLz48L3N2Zz4=); 53 | background-size: 100%; 54 | opacity: .6; 55 | background-position: 0 50%; 56 | transition: all 50ms ease; 57 | } 58 | 59 | .create-guild-container.deprecated .action:hover.create .btn, 60 | .form .btn-primary:hover { 61 | filter: brightness(93%)contrast(110%); 62 | } 63 | 64 | .form.deprecated .btn-default{ 65 | padding: 10px 20px; 66 | border:none!important; 67 | color:var(--nox-white)!important; 68 | background:var(--nox-level1); 69 | } 70 | .form-actions .btn-default, 71 | .form.deprecated .btn-primary { 72 | margin-bottom: 5px; 73 | box-shadow: 0 6px 10px rgba(0, 0, 0, .0); 74 | transition: all 200ms ease; 75 | border-radius: 3px; 76 | } 77 | .form-actions .btn-default:hover, 78 | .form.deprecated .btn-primary:hover { 79 | -ms-transform: translate(0, -1px); 80 | transform: translate(0, -1px); 81 | box-shadow: 0 6px 15px rgba(0, 0, 0, .2); 82 | transition:all 100ms ease, transform 150ms cubic-bezier(0,0,0,1) 83 | } 84 | .form-actions .btn-default:active, 85 | .form.deprecated .btn-primary:active { 86 | color: rgba(0, 0, 0, 0.7)!important; 87 | background: rgb(220, 220, 220)!important; 88 | -ms-transform: translate(0, 2px); 89 | transform: translate(0, 2px); 90 | box-shadow: 0 0px 0px rgba(0, 0, 0, .5); 91 | transition: all 50ms ease; 92 | border-radius: 4px; 93 | } 94 | 95 | .form.deprecated .control-group input, 96 | .form.deprecated .control-group textarea, 97 | .form .control-group input, 98 | .form .control-group textarea, 99 | .serverfolders-modal input { 100 | background: transparent!important; 101 | color: var(--nox-white)!important; 102 | border:none!important; 103 | border-bottom:2px solid rgba(255,255,255,.05)!important; 104 | margin-bottom: 0!important; 105 | border-radius:0!important; 106 | background:transparent!important; 107 | 108 | } 109 | .form.deprecated .control-group input:focus, 110 | .form.deprecated .control-group textarea:focus, 111 | .form .control-group input:focus, 112 | .form .control-group textarea:focus, 113 | .serverfolders-modal input:focus { 114 | border-bottom: 2px solid var(--nox-accent)!important; 115 | } 116 | /* End Create/join invite */ -------------------------------------------------------------------------------- /legacy/modals/customstatus.scss: -------------------------------------------------------------------------------- 1 | .root-1gCeng .footer-3rDWdC { 2 | background-color: var(--nox-level2); 3 | border-top: 0!important; 4 | box-shadow: none; 5 | } 6 | 7 | .root-1gCeng .emojiButtonContainer-3d6DFV { 8 | margin-left: 0; 9 | } 10 | 11 | .root-1gCeng .emojiButton-2NpAb3 { 12 | padding: 0; 13 | width: 32px; 14 | filter: none!important; 15 | box-shadow: none!important; 16 | background-color: transparent; 17 | } 18 | 19 | .root-1gCeng .emojiButton-2NpAb3 img.emoji, 20 | .root-1gCeng .emojiButton-2NpAb3 img.emoji:hover { 21 | background-color: var(--nox-level2); 22 | } 23 | 24 | .art-347BZj { 25 | filter: grayscale(100%) brightness(90%); 26 | } -------------------------------------------------------------------------------- /legacy/modals/deprecated.scss: -------------------------------------------------------------------------------- 1 | /*deprecated*/ 2 | .form-deprecated .control-group input, 3 | .form-deprecated .control-group textarea, 4 | .form .control-group input, 5 | .form .control-group textarea, 6 | .serverfolders-modal input { 7 | background: transparent!important; 8 | color: var(--nox-white)!important; 9 | border:none!important; 10 | border-bottom:2px solid rgba(255,255,255,.05)!important; 11 | margin-bottom: 0!important; 12 | border-radius:0!important; 13 | background:transparent!important; 14 | 15 | } 16 | .form-deprecated .control-group input:focus, 17 | .form-deprecated .control-group textarea:focus, 18 | .form .control-group input:focus, 19 | .form .control-group textarea:focus, 20 | .serverfolders-modal input:focus{ 21 | border-bottom: 2px solid var(--nox-accent)!important; 22 | } 23 | /*/deprecated*/ 24 | 25 | .form .btn-primary { 26 | margin-bottom: 5px; 27 | box-shadow: 0 6px 10px rgba(0, 0, 0, .0); 28 | transition: all 200ms ease; 29 | border-radius: 3px; 30 | } 31 | 32 | .form .btn-primary:hover { 33 | -ms-transform: translate(0, -1px); 34 | transform: translate(0, -1px); 35 | box-shadow: 0 6px 15px rgba(0, 0, 0, .2); 36 | transition: all 150ms ease-in-out; 37 | } 38 | 39 | .form .btn-primary:active { 40 | color: rgba(0, 0, 0, 0.7); 41 | background: rgb(220, 220, 220)!important; 42 | -ms-transform: translate(0, 2px); 43 | transform: translate(0, 2px); 44 | box-shadow: 0 0px 0px rgba(0, 0, 0, .5); 45 | transition: all 50ms ease; 46 | border-radius: 4px; 47 | } 48 | 49 | 50 | .form .control-groups.control-separator { 51 | border-color: rgba(255, 255, 255, .02) 52 | } -------------------------------------------------------------------------------- /legacy/modals/downloadapps.scss: -------------------------------------------------------------------------------- 1 | .backdrop-1wrmKB[style*="background-color: rgb(255, 255, 255);"] { 2 | background-color: black!important; 3 | } 4 | 5 | .downloadApps-wbBFdZ .footer-1nkeBm a, 6 | .downloadApps-wbBFdZ .header-nJMe-Q { 7 | color: var(--nox-accent); 8 | } 9 | 10 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236.active-iLSdWQ { 11 | border-color: var(--nox-accent); 12 | } 13 | 14 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236.active-iLSdWQ .downloadButton-1bWXpg { 15 | background-color: var(--nox-accent); 16 | } 17 | 18 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236.active-iLSdWQ p { 19 | color: var(--nox-accent); 20 | } 21 | 22 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236 .icon-2Pk7pb { 23 | transform: scale(0.8); 24 | } 25 | 26 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236.active-iLSdWQ .icon-2Pk7pb.active-iLSdWQ { 27 | opacity: 0; 28 | } 29 | 30 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236.active-iLSdWQ .icon-2Pk7pb { 31 | opacity: 1; 32 | filter: brightness(0); 33 | } 34 | 35 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236 .iconWrap-1pnF3w { 36 | transition: background 200ms ease; 37 | border-radius: 25px; 38 | background: transparent; 39 | } 40 | 41 | .downloadApps-wbBFdZ .platforms-28Rb-3 .platform-iik236.active-iLSdWQ .iconWrap-1pnF3w { 42 | background: var(--nox-accent); 43 | } -------------------------------------------------------------------------------- /legacy/modals/generic.scss: -------------------------------------------------------------------------------- 1 | .close-1kwMUs{ 2 | color:var(--nox-white6); 3 | background:transparent; /* Previous: white1; */ 4 | position: relative; 5 | border-radius:50%; 6 | box-shadow: none; /* Previous: 0 0 0 13px #212121 inset; */ 7 | } 8 | .theme-dark .close-1kwMUs:hover{ 9 | color:var(--nox-white); 10 | background:transparent; 11 | } 12 | .modal-yWgWj- .footer-3rDWdC { 13 | background-color: var(--nox-level2); 14 | border-top: 0!important 15 | } 16 | .theme-dark .footer-3mqk7D {box-shadow: none;} 17 | // .modal-yWgWj- .header-2tA9Os .close-1kwMUs svg {display: none;} 18 | // .modal-yWgWj- .header-2tA9Os .close-1kwMUs { 19 | // background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==); 20 | // background-size: 100%; 21 | // position: absolute; 22 | // top: 0; 23 | // right: 15px; 24 | // zoom: 1.8 25 | // } 26 | // .modal-yWgWj- .header-2tA9Os .close-1kwMUs{ 27 | // top: 10px; 28 | // } 29 | 30 | 31 | .modal-yWgWj- .message-group .comment { 32 | background: rgba(0, 0, 0, .08); 33 | } 34 | .modal-yWgWj- .message-group .comment::before { 35 | border-color: transparent rgba(0, 0, 0, .08) transparent transparent; 36 | } 37 | .modal-yWgWj- .message-group .comment code { 38 | background: rgba(0, 0, 0, .0)!important; 39 | border: none!important; 40 | } 41 | .modal-yWgWj- .message-group .comment pre { 42 | background: rgba(0, 0, 0, .05)!important; 43 | border: none!important; 44 | border-radius: 3px!important; 45 | } 46 | .modal-yWgWj- .message-group .comment code.inline { 47 | background: rgba(0, 0, 0, .08)!important; 48 | } 49 | 50 | 51 | 52 | .modal-1UGdnR .modal-yWgWj- { 53 | background: var(--nox-level1); 54 | box-shadow: 0px 10px 30px rgba(0, 0, 0, .5); 55 | border-radius: 3px; 56 | color: var(--nox-white6); 57 | } 58 | .modal-yWgWj- .header-2tA9Os { 59 | border-bottom: 0px; 60 | color: var(--nox-white8); 61 | background: var(--nox-level3); 62 | box-shadow: 0 0px 10px rgba(0, 0, 0, .3), 0 2px 2px rgba(255, 255, 255, 0.04) inset; 63 | } 64 | .content-8biNdB { 65 | padding-top: 15px; 66 | } 67 | 68 | 69 | .theme-dark .message-2qRu38 { 70 | box-shadow: none; 71 | background: none; 72 | } 73 | 74 | 75 | .maxLength-39QFBo{ 76 | color:var(--nox-white2); 77 | transition: 200ms ease; 78 | } 79 | textarea:focus + .maxLength-39QFBo{ 80 | color:var(--nox-white3); 81 | } 82 | 83 | .theme-brand .content-Qb0rXO { 84 | color: #f6f6f7; 85 | } 86 | 87 | 88 | .header-2tA9Os .searchBar-2_Yu-C { 89 | background: var(--nox-level1); 90 | } 91 | 92 | .header-2tA9Os .searchBarInner-1_Tg2R { 93 | background: none; 94 | } 95 | 96 | .header-2tA9Os .searchBarTag-2xRzm8 { 97 | background: var(--nox-level2); 98 | } 99 | 100 | .modal-yWgWj-.popout-3Nppv9.sizeSmall-Sf4iOi { 101 | animation: toppopout 400ms cubic-bezier(0.3, 0.3, 0, 1); 102 | left: 10px; 103 | } 104 | 105 | // .backdrop-1wrmKB { 106 | // z-index: 1006!important; 107 | // } 108 | 109 | // .modal-3c3bKg { 110 | // z-index: 1007; 111 | // } 112 | 113 | .theme-dark .modal-yWgWj-, 114 | .modal-yWgWj-.modal-1sor29 { 115 | background: var(--nox-level2); 116 | box-shadow: none; 117 | border-radius: 5px; 118 | overflow: hidden; 119 | } 120 | 121 | 122 | .modal-3c3bKg .header-1TKi98, 123 | .root-1gCeng .header-1TKi98 { 124 | background-color: var(--nox-level3); 125 | border-top: 0!important; 126 | box-shadow: none; 127 | } 128 | 129 | .modal-3c3bKg .footer-2gL1pp, 130 | .root-1gCeng .footer-2gL1pp { 131 | background-color: var(--nox-level1); 132 | border-top: 0!important; 133 | box-shadow: none; 134 | } 135 | 136 | .content-1LAB8Z { 137 | padding-top: 16px; 138 | } 139 | 140 | .content-mK72R6 { 141 | padding-top: 20px; 142 | } -------------------------------------------------------------------------------- /legacy/modals/givenitro.scss: -------------------------------------------------------------------------------- 1 | .measurement-36xDqs .option-1l2vXE { 2 | background: var(--nox-level2); 3 | } 4 | 5 | .theme-dark .root-1gCeng { 6 | background: var(--nox-level2); 7 | } -------------------------------------------------------------------------------- /legacy/modals/install.scss: -------------------------------------------------------------------------------- 1 | .info-P9dFwH { 2 | background-color: var(--nox-level3); 3 | } 4 | 5 | .modal-1UGdnR .gamePreview-9weYR2 { 6 | background-color: var(--nox-level2); 7 | } -------------------------------------------------------------------------------- /legacy/modals/joinmodal.scss: -------------------------------------------------------------------------------- 1 | .container-2Yth53 .contentWrapper-3WC1ID { 2 | background: var(--nox-level1); 3 | } 4 | 5 | .container-2Yth53 .contentWrapper-3WC1ID .pill-1dHPfk { 6 | background: var(--nox-level2); 7 | } -------------------------------------------------------------------------------- /legacy/modals/keyboardshortcuts.scss: -------------------------------------------------------------------------------- 1 | .keyboardShortcutsModal-3piNz7{ 2 | background:var(--nox-level2)!important; 3 | } 4 | .keyboardShortcutsModal-3piNz7 .modalTitle-37O4n6{ 5 | margin:0; 6 | padding-bottom:5px; 7 | z-index:2; 8 | color:var(--nox-white9); 9 | } 10 | .keyboardShortcutsModal-3piNz7 .modalSubtitle-1Pj5nv, 11 | .keyboardShortcutsModal-3piNz7 .modalTitle-37O4n6{ 12 | background:var(--nox-level3); 13 | } 14 | .keyboardShortcutsModal-3piNz7 .modalSubtitle-1Pj5nv{ 15 | border-bottom:none; 16 | box-shadow:0 0 10px rgba(0, 0, 0, .3); 17 | z-index:1; 18 | color:var(--nox-white4); 19 | } 20 | .keyboardShortcutsModal-3piNz7 .ddrArrows-lSnH7P{ 21 | z-index:3; 22 | filter: grayscale(100%) brightness(90%); 23 | } 24 | .keyboardShortcutsModal-3piNz7 .keyboardShortcutList-13cQ-8 .keybindGroup--6Qp-w .keybindDescription-2RDbC2{ 25 | color:var(--nox-white4); 26 | } 27 | .theme-dark .keybindShortcut-1BD6Z1 span{ 28 | border:none; 29 | box-shadow:0 2px 10px rgba(0,0,0,.3); 30 | background:var(--nox-level1); 31 | line-height:17px; 32 | color:var(--nox-white6); 33 | cursor:pointer; 34 | } 35 | .theme-dark .keybindShortcut-1BD6Z1 span:active{ 36 | color:var(--nox-white7); 37 | border:none; 38 | box-shadow:none; 39 | transform:translate(0,2px); 40 | height:23px; 41 | background:#353535; 42 | } 43 | .theme-dark .keybindShortcut-1BD6Z1 span svg g{ 44 | fill:var(--nox-white6)!important; 45 | } 46 | .theme-dark .keybindShortcut-1BD6Z1 span:active svg g{ 47 | fill:var(--nox-white7)!important; 48 | } 49 | .theme-dark .keybindShortcut-1BD6Z1.dim-1l4L4y span{ 50 | background:var(--nox-level2); 51 | color:var(--nox-white6); 52 | } 53 | .theme-dark .keybindShortcut-1BD6Z1.dim-1l4L4y span:active{ 54 | background:#282828; 55 | color:var(--nox-white6); 56 | } -------------------------------------------------------------------------------- /legacy/modals/quickswitcher.scss: -------------------------------------------------------------------------------- 1 | /*quickswitcher*/ 2 | 3 | .quickswitcher-3JagVE { 4 | background: var(--nox-level2)!important; 5 | border-radius: 5px; 6 | box-shadow: 0 5px 10px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .02) inset!important; 7 | } 8 | .theme-dark .quickswitcher-3JagVE .input-2VB9rf { 9 | background: var(--nox-level1); 10 | box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 11 | position:absolute; 12 | width:570px; 13 | left:0; 14 | top:-90px; 15 | animation:quickswitcher2 400ms cubic-bezier(.7,0,0,1); 16 | } 17 | .container-3qKHyN { 18 | margin-top:200px; 19 | animation:opacity 200ms ease, quickswitcher 400ms cubic-bezier(.7,0,0,1); 20 | animation-fill-mode: both 21 | } 22 | @keyframes quickswitcher{ 23 | 0%{ 24 | transform:translate(0,50px); 25 | } 26 | } 27 | @keyframes quickswitcher2{ 28 | 0%{ 29 | transform:translate(0,-50px); 30 | } 31 | } 32 | .quickswitcher-3JagVE .scroller-zPkAnE {background: none;} 33 | .theme-dark .quickswitcher-3JagVE .scrollerOuter-3FLELE::before { 34 | background-image: linear-gradient(0deg, transparent, var(--nox-level2) 100%, transparent); 35 | display:none; 36 | } 37 | .theme-dark .quickswitcher-3JagVE .result-oB0z-- { 38 | transition: 100ms ease; 39 | overflow: hidden; 40 | } 41 | 42 | .theme-dark .quickswitcher-3JagVE .resultFocused-3aIoYe { 43 | background: var(--nox-level3); 44 | transition: 50ms ease!important 45 | } 46 | 47 | .theme-dark .quickswitcher-3JagVE .result-oB0z--::after { 48 | box-shadow: none!important; 49 | width: 40px; 50 | border-radius: 0 2px 2px; 51 | background-color: #181818!important; 52 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+ICAgIDxwYXRoIGQ9Ik0xMSA5bDEuNDIgMS40Mkw4LjgzIDE0SDE4VjRoMnYxMkg4LjgzbDMuNTkgMy41OEwxMSAyMWwtNi02IDYtNnoiLz48L3N2Zz4=)!important; 53 | content: ""; 54 | z-index: 10; 55 | height: 100%; 56 | position: absolute; 57 | top: 0; 58 | right: 0; 59 | opacity: 0; 60 | transition: 200ms ease; 61 | background-repeat: no-repeat; 62 | background-position: 40%; 63 | -ms-transform: translate(40px); 64 | transform: translate(40px); 65 | } 66 | .theme-dark .quickswitcher-3JagVE .resultFocused-3aIoYe::after { 67 | opacity: 1; 68 | transition: 100ms ease 100ms; 69 | -ms-transform: translate(0px); 70 | transform: translate(0px); 71 | transition: 200ms cubic-bezier(0,0,0,1); 72 | } 73 | .theme-dark .quickswitcher-3JagVE .resultFocused-3aIoYe:active::after { 74 | background-color:var(--nox-accent)!important; 75 | } 76 | .theme-dark .quickswitcher-3JagVE .resultFocused-3aIoYe:active, 77 | .theme-dark .quickswitcher-3JagVE .resultFocused-3aIoYe:active::after { 78 | background-color: var(--nox-accent); 79 | transition: 0ms!important; 80 | } 81 | .quickswitcher-3JagVE .scrollerOuter-3FLELE .scroller-zPkAnE::-webkit-scrollbar { 82 | display: none; 83 | } 84 | .quickswitcher-3JagVE .scrollerOuter-3FLELE { 85 | margin-right: -4px!important 86 | } 87 | 88 | .keybind-shortcut.dark span { 89 | border: none; 90 | color: var(--nox-white5); 91 | box-shadow: none; 92 | background: var(--nox-level1); 93 | height: 23px; 94 | margin-bottom: -6px; 95 | } 96 | 97 | .theme-dark .quickswitcher-3JagVE .tipsWithResults-HhTE9b { 98 | border-color: rgba(255, 255, 255, .03); 99 | color:var(--nox-white3); 100 | } 101 | 102 | .keybind-shortcut.dark span:active { 103 | box-shadow: none; 104 | color: var(--nox-white7); 105 | } 106 | 107 | .keybind-shortcut.dark svg g { 108 | fill: var(--nox-white5)!important; 109 | } 110 | 111 | .quickswitcher-3JagVE .tips .misc-controls .keybind-shortcut:last-of-type::before { 112 | display: none; 113 | } 114 | 115 | .theme-dark .quickswitcher-3JagVE .scrollerOuter-3FLELE::before{ 116 | display:none; 117 | } 118 | 119 | .theme-dark .quickswitcher-3JagVE .scrollerOuter-3FLELE:before{ 120 | background-image: linear-gradient(0deg,transparent,var(--nox-level2) 60%,var(--nox-level2)); 121 | } 122 | 123 | .qs-tutorial { 124 | top: -160px; 125 | } -------------------------------------------------------------------------------- /legacy/modals/reactions.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .container-1If-HZ, 2 | .theme-dark .reactors-Blmlhw { 3 | background: var(--nox-level2); 4 | } 5 | .reactionDefault-GBA58K .count-1vzEyg { 6 | color: rgba(255, 255, 255, 0.3); 7 | } 8 | .reactionSelected-1pqISm .count-1vzEyg{ 9 | color: var(--nox-white); 10 | } 11 | .reactionDefault-GBA58K:hover .count-1vzEyg{ 12 | color: rgba(255, 255, 255, 0.8); 13 | } 14 | .modal-3HD5ck{ 15 | border:none; 16 | } 17 | .theme-dark .modal-3HD5ck{ 18 | box-shadow: 0 5px 20px rgba(0,0,0,.3); 19 | overflow: hidden; 20 | border-radius: 4px; 21 | background: var(--nox-level1); 22 | } 23 | .modal-3HD5ck .header-1R_AjF{ 24 | border-radius: 4px 4px 0 0 25 | } 26 | .theme-dark .reactorDefault-1IUqMZ{ 27 | box-shadow: none; 28 | } 29 | .theme-dark .primary-jw0I4K{ 30 | color:var(--nox-white8); 31 | } 32 | 33 | .container-1If-HZ .scroller-1-nKid { 34 | background: var(--nox-level1) 35 | } 36 | .reactionSelected-1pqISm { 37 | background: var(--nox-white1)!important 38 | } 39 | .reactionDefault-GBA58K:hover { 40 | background: rgba(255, 255, 255, .04)!important 41 | } -------------------------------------------------------------------------------- /legacy/modals/regionselect.scss: -------------------------------------------------------------------------------- 1 | /* Region Selection */ 2 | .regionSelectModal-12e-57 { 3 | background: var(--nox-level2); 4 | box-shadow: 0 5px 20px rgba(0,0,0,.3); 5 | border-radius: 4px; 6 | } 7 | 8 | .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3 { 9 | background: var(--nox-level1); 10 | border-color: transparent; 11 | transition: 300ms ease; 12 | border:none!important; 13 | border-radius:3px; 14 | box-shadow:0 5px 10px rgba(0,0,0,.3),0 0 0 2px transparent inset; 15 | } 16 | 17 | .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3:hover { 18 | background: #353535; 19 | box-shadow:0 5px 5px rgba(0,0,0,.3),0 0 0 2px transparent inset; 20 | border-color: transparent; 21 | } 22 | 23 | .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3:active { 24 | background: #353535; 25 | box-shadow:0 5px 5px rgba(0,0,0,.3),0 0 0 2px var(--nox-accent) inset; 26 | transition: 0ms 27 | } 28 | 29 | .theme-dark .regionSelectName-2-2FWh { 30 | color:var(--nox-white4); 31 | transition:200ms ease!important 32 | } 33 | .theme-dark .regionSelectModalOption-2DSIZ3:hover .regionSelectName-2-2FWh { 34 | color:var(--nox-white9); 35 | } 36 | .regionSelectModal-12e-57 .regionSelectModalFooter-20C5iA { 37 | color:var(--nox-white3); 38 | } 39 | 40 | .regionSelectModal-12e-57 .regionSelectModalHeader-21khC1 { 41 | color: var(--nox-accent); 42 | } 43 | 44 | .regionSelect-3lf4eE:hover button { 45 | background: var(--nox-accent)!important; 46 | border-color: var(--nox-accent)!important; 47 | } 48 | 49 | .regionSelect-3lf4eE .regionSelectInner-24f4Ce { 50 | background: var(--nox-level1); 51 | border-color: transparent; 52 | transition: 300ms ease; 53 | } 54 | 55 | .regionSelect-3lf4eE:hover .regionSelectInner-24f4Ce { 56 | background: #353535; 57 | border-color: transparent!important; 58 | } 59 | 60 | .regionSelect-3lf4eE button { 61 | background: #353535; 62 | border-color: transparent; 63 | color: var(--nox-accent); 64 | } 65 | 66 | .regionSelectName-2-2FWh { 67 | color: var(--nox-white8); 68 | transition:50ms ease; 69 | } 70 | 71 | .regionSelect-3lf4eE:active button { 72 | background: var(--nox-accent); 73 | color: var(--nox-white) 74 | } 75 | /* End Region Selection */ -------------------------------------------------------------------------------- /legacy/modals/screenshare.scss: -------------------------------------------------------------------------------- 1 | .lookFilled-1Gx00P.colorBrand-3pXr91:disabled, 2 | .selectorButtonSelected-1j4DmC { 3 | background: var(--nox-accent); 4 | } 5 | .selectorNitroIcon-2rQO-z path { 6 | fill: var(--nox-accent); 7 | } 8 | .modal-3HD5ck .tiles-2aXG_k { 9 | background: var(--nox-level2); 10 | } 11 | .imageSelected-4Kl81J { 12 | border-color: var(--nox-accent); 13 | } -------------------------------------------------------------------------------- /legacy/modals/webinvite.scss: -------------------------------------------------------------------------------- 1 | /* Invite from web modal */ 2 | .inviteModal-34DdOm { 3 | background: var(--nox-level2); 4 | box-shadow: 0 5px 20px rgba(0,0,0,.3); 5 | border-radius: 4px; 6 | } 7 | 8 | .inviteModal-34DdOm .inviteTitle-2-D7Bk { 9 | color: var(--nox-white); 10 | } 11 | 12 | .inviteModal-34DdOm .inviteBody-1Y3j7y { 13 | color: var(--nox-white3); 14 | } 15 | 16 | .inviteModal-34DdOm .inviteBody-1Y3j7y strong { 17 | color: var(--nox-white5); 18 | } 19 | /* End invite from web modal */ -------------------------------------------------------------------------------- /legacy/old/btn-confirm.scss: -------------------------------------------------------------------------------- 1 | .btn-confirm.active .icon.icon-delete, 2 | .btn-confirm .icon.icon-delete:hover, 3 | .btn-confirm .icon.icon-delete{ 4 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+ICAgIDxwYXRoIGQ9Ik02IDE5YzAgMS4xLjkgMiAyIDJoOGMxLjEgMCAyLS45IDItMlY3SDZ2MTJ6bTIuNDYtNy4xMmwxLjQxLTEuNDFMMTIgMTIuNTlsMi4xMi0yLjEyIDEuNDEgMS40MUwxMy40MSAxNGwyLjEyIDIuMTItMS40MSAxLjQxTDEyIDE1LjQxbC0yLjEyIDIuMTItMS40MS0xLjQxTDEwLjU5IDE0bC0yLjEzLTIuMTJ6TTE1LjUgNGwtMS0xaC01bC0xIDFINXYyaDE0VjR6Ii8+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=); 5 | } 6 | .form .btn-confirm .btn.icon.icon-delete{ 7 | background-size:70%!important; 8 | } 9 | 10 | .settings .settings-actions .btn-confirm .icon.icon-delete, 11 | .settings .settings-actions .btn-confirm .icon.icon-logout { 12 | transition: all 200ms ease; 13 | opacity: 0.4; 14 | background-size: 48%; 15 | width:77px!important; 16 | height:77px!important; 17 | position:absolute; 18 | bottom:0px; 19 | background-size:30%; 20 | left:0; 21 | border-radius:0!important; 22 | } 23 | 24 | .btn-confirm.active .icon.icon-logout { 25 | border-radius: 0px 3px 3px 0px; 26 | } 27 | 28 | .btn-confirm { 29 | margin-top: 4px 30 | } 31 | .btn-confirm.active .icon.icon-delete, 32 | .btn-confirm .icon.icon-delete:hover, 33 | .btn-confirm.active .icon.icon-logout, 34 | .btn-confirm .icon.icon-logout:hover { 35 | opacity: 1!important; 36 | } 37 | 38 | 39 | .btn-confirm:not(.reverse-slide).active .btn:last-of-type:not(:first-of-type) { 40 | background: #C73F3F; 41 | transition: 200ms cubic-bezier(0, 0, 0, 1); 42 | white-space: initial; 43 | height:77px!important; 44 | position:absolute; 45 | width:auto; 46 | bottom:0; 47 | left:77px; 48 | opacity:1; 49 | visibility:visible; 50 | padding-left:25px; 51 | padding-right:25px; 52 | } 53 | .btn-confirm:not(.reverse-slide) .btn:last-of-type:not(:first-of-type) { 54 | white-space: initial; 55 | height:77px!important; 56 | position:absolute; 57 | width:auto; 58 | bottom:0; 59 | left:77px; 60 | opacity:0; 61 | visibility: hidden 62 | } 63 | 64 | 65 | .btn-confirm:not(.reverse-slide) .btn:last-of-type:not(:first-of-type) { 66 | transition: 200ms cubic-bezier(1, 0, 1, 1) 67 | } -------------------------------------------------------------------------------- /legacy/old/misc.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .layer-3QrUeG, 2 | .theme-dark .layers-3iHuyZ { 3 | background:transparent; 4 | } 5 | 6 | .form .form-inner{ 7 | color:var(--nox-white); 8 | } 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | .theme-dark .ui-selectable-item{ 18 | transition:50ms ease; 19 | } 20 | .theme-dark .ui-selectable-item:hover{ 21 | background:var(--nox-black3); 22 | } 23 | .theme-dark .ui-search-bar{ 24 | background:transparent; 25 | } 26 | .ui-search-bar .input{ 27 | width:100%!important; 28 | border-bottom:2px solid var(--nox-white1); 29 | border-radius:0; 30 | } 31 | .ui-search-bar .input:focus{ 32 | border-color:var(--nox-accent); 33 | } 34 | .ui-search-bar-icon{ 35 | position:absolute; 36 | right:0px; 37 | } 38 | 39 | 40 | 41 | .theme-dark .ui-text-input.emoji-alias-input .input{ 42 | background:transparent; 43 | } 44 | .theme-dark .round-remove-button{ 45 | background-color:var(--nox-level2); 46 | box-shadow:none; 47 | } 48 | .theme-dark .round-remove-button:hover{ 49 | box-shadow:none; 50 | background-color:var(--nox-level3); 51 | } 52 | .webhook-modal{ 53 | background:var(--nox-level1); 54 | } 55 | .webhook-modal-footer{ 56 | background:#353535; 57 | } 58 | .theme-light .ui-form-title.h5{ 59 | color:var(--nox-white7); 60 | } 61 | 62 | .theme-light .ui-text-input .input, 63 | .theme-light .ui-text-input .input.editable:focus, 64 | .theme-light .ui-text-input .input.editable:hover{ 65 | color:var(--nox-white7); 66 | } 67 | .theme-light .ui-form-text.style-description, 68 | .theme-light .ui-form-text.style-label-descriptor{ 69 | color:var(--nox-white5); 70 | } 71 | 72 | .ui-button.grey.ghost, 73 | .theme-light .ui-input-button .input, 74 | .theme-light .ui-button.primary.outlined, 75 | .theme-light .ui-select .Select-value-label{ 76 | color:var(--nox-white7); 77 | } 78 | .ui-button.grey.link{ 79 | color:var(--nox-white4); 80 | } 81 | .form-deprecated .Select-option, 82 | .form-deprecated .Select-option.is-focused, 83 | .form-deprecated .Select-option:hover, 84 | .theme-light .ui-select .Select-option, 85 | .theme-light .ui-select .Select-option.is-focused, 86 | .theme-light .ui-select .Select-option:hover{ 87 | background:transparent; 88 | } 89 | .theme-light .ui-select .Select-menu-outer{ 90 | border-color:var(--nox-level2); 91 | background:var(--nox-level2); 92 | } 93 | .theme-light .ui-select .is-open .Select-control{ 94 | background:var(--nox-level1); 95 | } 96 | .theme-dark .ui-modal, .theme-dark .ui-modal-content{ 97 | background:var(--nox-level1); 98 | } 99 | .theme-dark .ui-modal-footer{ 100 | box-shadow: none; 101 | background:#353535; 102 | } -------------------------------------------------------------------------------- /legacy/old/pm-invite.scss: -------------------------------------------------------------------------------- 1 | .private-channel-recipients-invite .friend { 2 | margin-left: 0; 3 | border-radius: 0; 4 | } 5 | 6 | .private-channel-recipients-invite .body .scroller::-webkit-scrollbar { 7 | background: rgba(225, 225, 225, 0.02); 8 | width: 6px!important; 9 | } 10 | 11 | .private-channel-recipients-invite .body .scroller::-webkit-scrollbar-thumb { 12 | border: none !important; 13 | background-color: rgba(225, 225, 225, 0.2) !important; 14 | display: initial; 15 | border-radius: 0!important 16 | } 17 | 18 | .private-channel-recipients-invite .body .scroller::-webkit-scrollbar-thumb:active { 19 | border: none !important; 20 | background-color: rgba(225, 225, 225, 0.4) !important; 21 | display: initial; 22 | border-radius: 0!important 23 | } 24 | 25 | .private-channel-recipients-invite .search-bar{ 26 | background:transparent; 27 | } 28 | 29 | .private-channel-recipients-invite .error-state.not-friends .btn:hover{ 30 | transition:100ms ease; 31 | } 32 | 33 | .private-channel-recipients-invite .error-state.not-friends .btn:hover{ 34 | -filter:brightness(85%); 35 | } 36 | 37 | 38 | 39 | .private-channel-recipients-invite .footer button, 40 | .private-channel-recipients-invite .footer button:hover, 41 | .private-channel-recipients-invite .error-state.not-friends .btn:hover, 42 | .private-channel-recipients-invite .error-state.not-friends .btn { 43 | background: var(--nox-accent); 44 | } -------------------------------------------------------------------------------- /legacy/old/premium-settings.scss: -------------------------------------------------------------------------------- 1 | .premium-settings .premium-header.splash { 2 | border-bottom: 0; 3 | } 4 | 5 | .premium-settings .premium-header.splash { 6 | position: relative; 7 | background: none!important; 8 | } 9 | 10 | .premium-settings .premium-header.splash::before { 11 | width: 100%; 12 | background: url(https://canary.discordapp.com/assets/99d84e6e97d1a7737be24c391fbf57e3.svg) 100% 0px no-repeat; 13 | height: 100%; 14 | content: ""; 15 | display: block; 16 | position: absolute; 17 | filter: invert(85%) grayscale(100%); 18 | pointer-events: none; 19 | } 20 | 21 | 22 | 23 | .premium-settings .premium-header .intro-subtitle { 24 | color: var(--nox-white3) 25 | } 26 | 27 | .premium-settings .premium-feature .premium-feature-title { 28 | color: var(--nox-white3) 29 | } 30 | 31 | .premium-settings.v1 .premium-features .premium-feature .ui-form-text.style-default { 32 | color: var(--nox-white7); 33 | } 34 | 35 | .premium-settings .premium-header.splash { 36 | margin-bottom: 0!important 37 | } 38 | 39 | .premium-settings.v1 .premium-features { 40 | padding-top: 20px; 41 | padding-bottom: 20px; 42 | } -------------------------------------------------------------------------------- /legacy/old/searchbar.scss: -------------------------------------------------------------------------------- 1 | .search-bar-tag { 2 | background: var(--nox-level1)!important 3 | } 4 | 5 | 6 | 7 | .search-bar-clear::before { 8 | background: rgba(0, 0, 0, 0.8); 9 | transition: all 300ms ease!important; 10 | } 11 | 12 | .search-bar-clear::after { 13 | transition: all 300ms ease!important; 14 | background: rgba(225, 225, 225, 0.4); 15 | } 16 | 17 | .search-bar-clear { 18 | background: rgba(225, 225, 225, 0.5); 19 | transition: all 300ms ease!important 20 | } 21 | 22 | .search-bar-clear.active { 23 | -ms-transform: rotate(-180deg)scale(.8); 24 | transform: rotate(-180deg)scale(.8); 25 | } 26 | 27 | 28 | -------------------------------------------------------------------------------- /legacy/old/sp.scss: -------------------------------------------------------------------------------- 1 | .sp-container{ 2 | background:var(--nox-level1)!important; 3 | border:none!important; 4 | border-radius:3px!important; 5 | box-shadow: 0 2px 10px rgba(0,0,0,.4) 6 | } 7 | .sp-picker-container{ 8 | border:none!important; 9 | } 10 | .sp-input{ 11 | color:var(--nox-white)!important; 12 | border:none!important; 13 | border-bottom: 2px solid var(--nox-white1)!important; 14 | border-radius: 0!important 15 | } 16 | .sp-input:focus{ 17 | outline: none; 18 | border-bottom: 2px solid var(--nox-accent)!important; 19 | } 20 | .sp-color, .sp-hue, .sp-clear{ 21 | border:none!important; 22 | } 23 | .sp-hue{ 24 | cursor: pointer; 25 | width:13px; 26 | border-radius:3px!important; 27 | } 28 | .sp-slider{ 29 | background:var(--nox-white)!important; 30 | border:none!important; 31 | margin-top:3px; 32 | border-radius:10px; 33 | height:8px!important; 34 | right:-6px!important; 35 | left:-6px!important; 36 | opacity:1!important; 37 | box-shadow:0 2px 10px rgba(0,0,0,.4); 38 | } 39 | .sp-dragger{ 40 | height:8px!important; 41 | width:8px!important; 42 | background:transparent!important; 43 | border:2px solid var(--nox-white)!important; 44 | border-radius:10px!important; 45 | margin-top:2px; 46 | margin-left:2px; 47 | box-shadow:0 2px 10px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.4)inset!important; 48 | } 49 | .sp-color{ 50 | cursor: pointer; 51 | overflow: hidden; 52 | border-radius:3px!important; 53 | } 54 | 55 | .sp-container{ 56 | transform:translate(0,0); 57 | opacity: 1; 58 | pointer-events: initial; 59 | transition:opacity 200ms cubic-bezier(.2,0,0,1),transform 200ms cubic-bezier(.2,0,0,1); 60 | } 61 | body .sp-hidden[style*="top"]{ 62 | transform:translate(0,-15px); 63 | display: block!important; 64 | opacity: 0; 65 | pointer-events: none; 66 | } -------------------------------------------------------------------------------- /legacy/old/specialmessages.scss: -------------------------------------------------------------------------------- 1 | /*special messages (chh)*/ 2 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup .emoji[src="/assets/8198c351ed59dcb838bc8e0c8885a726.svg"]{ 3 | display:none; 4 | } 5 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup .emoji[src="/assets/8198c351ed59dcb838bc8e0c8885a726.svg"]~em>strong{ 6 | font-size: 17px!important; 7 | display:inline-block; 8 | margin-bottom:5px; 9 | color:var(--nox-white9); 10 | border-radius:3px; 11 | font-style:initial; 12 | } 13 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup u em strong{ 14 | visibility: hidden; 15 | margin-left:-2px; 16 | } 17 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup u{ 18 | text-decoration:none!important; 19 | } 20 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup u em strong::after{ 21 | visibility: visible; 22 | content:var(--nox-version); 23 | width:300px!important; 24 | background:var(--nox-accent); 25 | color:var(--nox-white); 26 | font-weight:600; 27 | font-style:initial!important; 28 | text-decoration:none!important; 29 | padding:2px 10px; 30 | border-radius:2px; 31 | box-shadow:0 2px 15px rgba(0,0,0,.2); 32 | } 33 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup em strong u{ 34 | visibility: hidden; 35 | margin-left:-2px; 36 | } 37 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup em strong u::after{ 38 | content:"Web/other"; 39 | } 40 | .platform-win .avatar-large[style*="avatars/184021060562321419"]+.comment .markup em strong u::after{ 41 | content:"Windows"; 42 | } 43 | .platform-osx .avatar-large[style*="avatars/184021060562321419"]+.comment .markup em strong u::after{ 44 | content:"OSX"; 45 | } 46 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup em strong u::after{ 47 | visibility: visible; 48 | content:var(--nox-version); 49 | width:300px!important; 50 | background:var(--nox-accent); 51 | color:var(--nox-white); 52 | font-weight:600; 53 | font-style:initial!important; 54 | text-decoration:none!important; 55 | padding:2px 10px; 56 | border-radius:2px; 57 | box-shadow:0 2px 15px rgba(0,0,0,.2); 58 | } 59 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup em>img[src="/assets/8dcca2877f51849a159035186bf93dff.svg"]{ 60 | display: none; 61 | } 62 | .avatar-large[style*="avatars/184021060562321419"]+.comment .markup em>img[src="/assets/8dcca2877f51849a159035186bf93dff.svg"]+u::after{ 63 | content:"}"; 64 | font-family:BMTicons,Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; 65 | font-style:initial!important; 66 | color:var(--nox-accent); 67 | } 68 | /*special messages (chh)*/ -------------------------------------------------------------------------------- /legacy/plugins/betterformattingredux.scss: -------------------------------------------------------------------------------- 1 | #bfredux:before{ 2 | background:#363636!important; 3 | box-shadow: 0 2px 10px rgba(0,0,0,.2) 4 | } 5 | #bfredux { 6 | z-index: 10; 7 | } 8 | #bfredux.bf-left{ 9 | padding: 10px 20px 15px 50px!important; 10 | left: -8px!important; 11 | } 12 | #bfredux:not(.bf-left){ 13 | padding: 10px 50px 15px 20px!important; 14 | right: -8px!important; 15 | } 16 | #bfredux:before{ 17 | width: calc(100% - 25px)!important; 18 | height: calc(100% - 15px)!important; 19 | } 20 | #bfredux.bf-left:before { 21 | right: 10px!important; 22 | left: auto !important; 23 | } 24 | #bfredux:not(.bf-left):before { 25 | left: 10px!important; 26 | 27 | } 28 | #bfredux .bf-arrow{ 29 | opacity: 0.7; 30 | } 31 | #bfredux.bf-left .bf-arrow{ 32 | left: 20px!important; 33 | } 34 | #bfredux:not(.bf-left) .bf-arrow{ 35 | right: 20px!important; 36 | } 37 | #bfredux div:not(.bf-arrow):hover{ 38 | background: var(--nox-white1)!important; 39 | } 40 | #bfredux div:not(.bf-arrow):active{ 41 | background: var(--nox-black2)!important; 42 | } -------------------------------------------------------------------------------- /legacy/plugins/charcounter.scss: -------------------------------------------------------------------------------- 1 | #charcounter, 2 | #charcounter.normal { 3 | bottom: 3px; 4 | font-size: 12px; 5 | width: 75px; 6 | text-align: center; 7 | } -------------------------------------------------------------------------------- /legacy/plugins/citador.scss: -------------------------------------------------------------------------------- 1 | body .quote-close{ 2 | background:var(--nox-level2) url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==)!important; 3 | background-size: 60%!important; 4 | background-position: 50%!important; 5 | background-repeat: no-repeat!important; 6 | width:30px; 7 | height:30px; 8 | position: absolute; 9 | top:-5px; 10 | right:0; 11 | border-radius:50%; 12 | box-shadow:0 5px 10px rgba(0,0,0,.1); 13 | } 14 | body .quote-close::after{ 15 | content:""; 16 | background:var(--nox-white); 17 | border-radius:50%; 18 | display:block; 19 | width:100%; 20 | height:100%; 21 | position:absolute; 22 | opacity:0; 23 | transform:scale(1.7); 24 | transition:200ms ease; 25 | top:0; 26 | left:0; 27 | } 28 | body .quote-close:active::after{ 29 | opacity:0.1; 30 | transform:scale(1.7); 31 | animation:scale 100ms cubic-bezier(.4,0,0,1),opacity 100ms ease; 32 | } 33 | .delete-msg-btn{ 34 | background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+ICAgIDxwYXRoIGQ9Ik02IDE5YzAgMS4xLjkgMiAyIDJoOGMxLjEgMCAyLS45IDItMlY3SDZ2MTJ6bTIuNDYtNy4xMmwxLjQxLTEuNDFMMTIgMTIuNTlsMi4xMi0yLjEyIDEuNDEgMS40MUwxMy40MSAxNGwyLjEyIDIuMTItMS40MSAxLjQxTDEyIDE1LjQxbC0yLjEyIDIuMTItMS40MS0xLjQxTDEwLjU5IDE0bC0yLjEzLTIuMTJ6TTE1LjUgNGwtMS0xaC01bC0xIDFINXYyaDE0VjR6Ii8+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=)!important; 35 | background-size:120%!important; 36 | background-position: 50%!important; 37 | } 38 | .replyer, 39 | .quoter, 40 | body .citar-btn{ 41 | background-image:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTYgMTdoM2wyLTRWN0g1djZoM3ptOCAwaDNsMi00VjdoLTZ2NmgzeiIvPiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+)!important; 42 | color:transparent!important; 43 | background-size:70%!important; 44 | background-position: 50%!important; 45 | background-repeat: no-repeat!important; 46 | background-color:transparent!important; 47 | transition:100ms ease!important; 48 | animation: opacity 100ms ease; 49 | opacity:.8!important; 50 | border-radius:2px!important; 51 | user-select: none; 52 | } 53 | .replyer, 54 | .quoter{ 55 | box-sizing: initial!important; 56 | top:-6px!important; 57 | font-size:0!important; 58 | margin-left:0!important; 59 | padding:8px 10px!important; 60 | } 61 | .replyer:hover, 62 | .quoter:hover, 63 | body .citar-btn:hover{ 64 | background-color:#404040!important; 65 | transition:0ms!important; 66 | opacity: 1!important; 67 | } 68 | .replyer:active, 69 | .quoter:active, 70 | body .citar-btn:active{ 71 | background-color:var(--nox-level3)!important; 72 | transition:0ms!important; 73 | opacity: 1!important; 74 | } 75 | .citar-btn.quoting{ 76 | background-image:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNOSAxNi4xN0w0LjgzIDEybC0xLjQyIDEuNDFMOSAxOSAyMSA3bC0xLjQxLTEuNDF6Ii8+PC9zdmc+)!important; 77 | background-size:70%!important; 78 | background-position: 50%!important; 79 | background-repeat: no-repeat!important; 80 | background-color:#43B581!important; 81 | } -------------------------------------------------------------------------------- /legacy/plugins/dateviewer.scss: -------------------------------------------------------------------------------- 1 | #dv-container{ 2 | background:#252525!important; 3 | } 4 | #dv-settings-panel{ 5 | background:#252525!important; 6 | } 7 | .dv-btn:hover, .dv-btn.dv-active{ 8 | background:transparent!important; 9 | } 10 | .dv-panel input[type="radio"]:checked + label span{ 11 | background:var(--nox-accent)!important; 12 | } -------------------------------------------------------------------------------- /legacy/plugins/directdownload.scss: -------------------------------------------------------------------------------- 1 | /*DirectDownload plugin*/ 2 | body #files_directDownload{ 3 | left:70px; 4 | bottom:70px; 5 | width:240px; 6 | height:calc(100% - 56px - 70px); 7 | pointer-events: none; 8 | display: flex; 9 | flex-direction:column; 10 | overflow: hidden; 11 | justify-content: flex-end; 12 | position: fixed; 13 | z-index: 5; 14 | } 15 | body #files_directDownload .file{ 16 | pointer-events: initial; 17 | width:240px; 18 | min-width:240px; 19 | max-width: 240px; 20 | border:none; 21 | height:40px; 22 | animation:height 300ms cubic-bezier(.4,0,0,1); 23 | position:relative; 24 | background:#292929; 25 | border-radius:0!important; 26 | box-shadow:0 -2px 15px rgba(0,0,0,.2)!important; 27 | margin:0; 28 | overflow: hidden; 29 | transition:all 100ms ease,z-index 0ms 100ms; 30 | z-index:1; 31 | } 32 | body #files_directDownload .file:not(:first-of-type){ 33 | box-shadow:0 -32px 10px -30px rgba(0,0,0,.1) inset!important; 34 | } 35 | body #files_directDownload .file:first-of-type:not(:last-of-type){ 36 | box-shadow:0 -32px 10px -30px rgba(0,0,0,.1) inset,0 -2px 15px rgba(0,0,0,.2)!important; 37 | } 38 | body #files_directDownload .file.done:hover{ 39 | background:var(--nox-level1); 40 | z-index:2; 41 | box-shadow:0 2px 15px rgba(0,0,0,.2)!important; 42 | transition:all 100ms ease,z-index 0ms; 43 | } 44 | body #files_directDownload .file.done:active{ 45 | background:var(--nox-accent); 46 | transition:0ms; 47 | } 48 | 49 | body #files_directDownload .file span{ 50 | position: absolute; 51 | top:4px; 52 | left:10px; 53 | padding:0; 54 | line-height: 30px; 55 | max-width:200px; 56 | color:var(--nox-white6); 57 | transition:all 100ms ease; 58 | z-index: 1; 59 | } 60 | body #files_directDownload .file:active span, 61 | body #files_directDownload .file:hover span{ 62 | color:var(--nox-white); 63 | } 64 | 65 | body #files_directDownload .file .progress-bar{ 66 | background:var(--nox-accent); 67 | z-index: 0; 68 | } 69 | #files_directDownload .file.done .progress-bar{ 70 | opacity:0; 71 | height:100%; 72 | transition:opacity 500ms ease 600ms,height 200ms cubic-bezier(.4,0,0,1) 300ms; 73 | animation:progress-bar-finished 1s ease 1.1s; 74 | } 75 | @keyframes progress-bar-finished{ 76 | 0%{opacity:0;} 77 | 50%{opacity:1;} 78 | 100%{opacity:0;} 79 | } 80 | 81 | body #files_directDownload .file.done span{ 82 | animation:text-progress-finished 2.1s ease; 83 | } 84 | @keyframes text-progress-finished{ 85 | 15%{color:var(--nox-white6);} 86 | 30%{color:var(--nox-white);} 87 | 55%{color:var(--nox-white6);} 88 | 80%{color:var(--nox-white);} 89 | 100%{color:var(--nox-white6);} 90 | } 91 | body #files_directDownload .file svg{ 92 | fill:var(--nox-white4); 93 | top:50%; 94 | transform:translate(0,-50%); 95 | height:20px; 96 | width:20px; 97 | right:10px; 98 | transition:all 100ms ease, box-shadow 300ms ease, background 300ms ease; 99 | border-radius: 50%; 100 | box-shadow:0 0 0 18px var(--nox-white0); 101 | z-index: 1; 102 | } 103 | body #files_directDownload .file svg:hover{ 104 | fill:var(--nox-white); 105 | } 106 | body #files_directDownload .file svg:active{ 107 | fill:var(--nox-white); 108 | box-shadow:0 0 0 18px var(--nox-white3); 109 | background:var(--nox-white3); 110 | transition:all 100ms ease, background 150ms cubic-bezier(0,0,0,1); 111 | animation:box-shadow-ripple 150ms cubic-bezier(0,0,0,1); 112 | } 113 | 114 | @keyframes box-shadow-ripple{ 115 | from{box-shadow:0 0 0 0 var(--nox-white0);} 116 | } 117 | /*/DirectDownload plugin*/ -------------------------------------------------------------------------------- /legacy/plugins/edituploads.scss: -------------------------------------------------------------------------------- 1 | #EditUploadsEditButton { 2 | color: var(--nox-white); 3 | } 4 | 5 | #EditUploadsModal { 6 | background: var(--nox-level2); 7 | } 8 | 9 | #EditUploadsToolbar { 10 | background: var(--nox-level3); 11 | } 12 | 13 | #EditUploadsToolbar .tool:hover { 14 | background: var(--nox-level1); 15 | } 16 | 17 | #EditUploadsToolbar .tool:active { 18 | background: var(--nox-level2); 19 | } 20 | 21 | #EditUploadsModal > span { 22 | right: 20px!important; 23 | width: 28px; 24 | height: 28px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | color: var(--nox-white7); 29 | transition: color 200ms ease; 30 | } 31 | 32 | #EditUploadsModal > span:hover { 33 | color: var(--nox-white); 34 | } 35 | 36 | #EditUploadsModal > span::after{ 37 | content:""; 38 | background:var(--nox-white); 39 | border-radius:50%; 40 | display:block; 41 | width:100%; 42 | height:100%; 43 | position:absolute; 44 | opacity:0; 45 | top: 0; 46 | left: 0; 47 | transition:300ms ease; 48 | } 49 | #EditUploadsModal > span:active::after{ 50 | opacity:0.1; 51 | animation:scale 100ms cubic-bezier(.4,0,0,1),opacity 100ms ease; 52 | } 53 | #EditUploadsModal > span:active{ 54 | background-color:transparent; 55 | transform:none; 56 | } -------------------------------------------------------------------------------- /legacy/plugins/googletranslate.scss: -------------------------------------------------------------------------------- 1 | .translate-button { 2 | position: absolute; 3 | height: 22px; 4 | top: 50%; 5 | right: 55px; 6 | transform: translateY(-50%)!important; 7 | transition: none; 8 | } 9 | 10 | .theme-dark .popout-xwjvsX .themedPopout-1TrfdI { 11 | background: var(--nox-level2); 12 | } -------------------------------------------------------------------------------- /legacy/plugins/membercount.scss: -------------------------------------------------------------------------------- 1 | /* Member Count Plugin */ 2 | .members-1998pB #MemberCount { 3 | background: var(--nox-level2)!important; 4 | padding: 10px 0 0 0; 5 | margin: 0; 6 | } 7 | /* End Member Count Plugin */ -------------------------------------------------------------------------------- /legacy/plugins/newreplyer.scss: -------------------------------------------------------------------------------- 1 | .reply-list { 2 | background: var(--nox-level2); 3 | z-index: 10; 4 | } 5 | 6 | .reply-item { 7 | background: var(--nox-level1); 8 | } -------------------------------------------------------------------------------- /legacy/plugins/permissionviewer.scss: -------------------------------------------------------------------------------- 1 | #permissions-modal-wrapper .modal-wrapper { 2 | z-index: 100000; 3 | } 4 | 5 | #permissions-modal-wrapper .header { 6 | border-bottom: 0px; 7 | color: #fff; 8 | background: var(--nox-level3); 9 | border-radius: 3px 3px 0 0; 10 | box-shadow: 0 3px 10px rgba(0, 0, 0, .3); 11 | overflow-x: hidden; 12 | padding: 12px 20px; 13 | position: relative; 14 | z-index: 1; 15 | } 16 | 17 | #permissions-modal-wrapper .role-side { 18 | background: var(--nox-level2); 19 | } 20 | 21 | #permissions-modal-wrapper .perm-side { 22 | background: var(--nox-level1); 23 | } 24 | 25 | #permissions-modal-wrapper .perm-item { 26 | box-shadow: none; 27 | } 28 | 29 | .member-perms-header { 30 | padding-bottom: 8px; 31 | } 32 | 33 | #permissions-popout .member-perms { 34 | padding-top: 0; 35 | } 36 | 37 | .member-perm .perm-circle { 38 | display: none; 39 | } 40 | 41 | .member-perms .member-perm { 42 | height: 20px; 43 | line-height: 20px; 44 | } 45 | 46 | .member-perms .member-perm { 47 | padding: 0; 48 | } 49 | 50 | #permissions-popout .member-perms .member-perm .name { 51 | margin: 0 6px; 52 | } -------------------------------------------------------------------------------- /legacy/plugins/quoter.scss: -------------------------------------------------------------------------------- 1 | .container-1YxwTf .btn-quote{ 2 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTYgMTdoM2wyLTRWN0g1djZoM3ptOCAwaDNsMi00VjdoLTZ2NmgzeiIvPiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+)!important; 3 | transition: all 200ms ease!important; 4 | } 5 | 6 | .container-1YxwTf .btn-quote { 7 | margin-top: 4px; 8 | opacity: 0; 9 | } 10 | 11 | .content-3dzVd8:hover .btn-quote { 12 | opacity: 0.4; 13 | } 14 | 15 | .container-1YxwTf .btn-quote:hover { 16 | opacity: 0.7!important; 17 | } -------------------------------------------------------------------------------- /legacy/plugins/readall.scss: -------------------------------------------------------------------------------- 1 | #RANbutton-frame, 2 | #RANbutton-frame .guild-inner { 3 | width: 70px!important; 4 | } 5 | 6 | #RANbutton-frame:hover #RANbutton { 7 | background: rgba(255, 255, 255, 0.06); 8 | } 9 | 10 | #RANbutton-frame:active #RANbutton { 11 | background: var(--nox-white1); 12 | } -------------------------------------------------------------------------------- /legacy/plugins/replyer.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .replyer{ 4 | background-image:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTYgMTdoM2wyLTRWN0g1djZoM3ptOCAwaDNsMi00VjdoLTZ2NmgzeiIvPiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+)!important; 5 | color:transparent!important; 6 | background-size:70%!important; 7 | background-position: 50%!important; 8 | background-repeat: no-repeat!important; 9 | background-color:transparent!important; 10 | transition:100ms ease!important; 11 | animation: opacity 100ms ease; 12 | opacity:.8!important; 13 | border-radius:2px!important; 14 | user-select: none; 15 | } 16 | .replyer:hover, 17 | .replyer:active, 18 | .replyer{ 19 | background-image:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTEwIDlWNWwtNyA3IDcgN3YtNC4xYzUgMCA4LjUgMS42IDExIDUuMS0xLTUtNC0xMC0xMS0xMXoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==)!important; 20 | background-size:70%!important; 21 | background-position: 50%!important; 22 | background-repeat: no-repeat!important; 23 | } 24 | .replyer{ 25 | box-sizing: initial!important; 26 | top:-6px!important; 27 | font-size:0!important; 28 | margin-left:0!important; 29 | padding:8px 10px!important; 30 | } 31 | .replyer:hover{ 32 | background-color:#404040!important; 33 | transition:0ms!important; 34 | opacity: 1!important; 35 | } 36 | .replyer:active{ 37 | background-color:var(--nox-level3)!important; 38 | transition:0ms!important; 39 | opacity: 1!important; 40 | } 41 | 42 | .replyer { 43 | opacity: .7; 44 | border-radius: 100px; 45 | padding: 2px 6px!important 46 | } 47 | 48 | .replyer:hover { 49 | opacity: .8!important; 50 | } 51 | 52 | .replyer:active { 53 | background: #101010!important 54 | } -------------------------------------------------------------------------------- /legacy/plugins/sendbutton.scss: -------------------------------------------------------------------------------- 1 | .channelTextArea-1LDbYG .send-button { 2 | top:0; 3 | bottom: 0; 4 | } 5 | 6 | .channelTextArea-1LDbYG .send-button img { 7 | height: 25px; 8 | } 9 | 10 | 11 | -------------------------------------------------------------------------------- /legacy/plugins/serverfolders.scss: -------------------------------------------------------------------------------- 1 | .serverfolders-modal .form-header, .serverfolders-modal .form-actions{ 2 | background:#141414!important; 3 | } 4 | .serverfolders-modal .modal-inner{ 5 | background:#212121!important; 6 | } 7 | .serverfolders-modal .form-tab{ 8 | margin-top:10px; 9 | background:transparent!important; 10 | cursor: pointer; 11 | } 12 | .serverfolders-modal .form-tabcontent{ 13 | margin-top:50px!important; 14 | } 15 | .serverfolders-modal .form-tab button{ 16 | background:transparent!important; 17 | cursor:pointer!important; 18 | color: var(--nox-white2)!important; 19 | border-bottom: 2px solid transparent; 20 | margin-right: 5px; 21 | transition: 0ms!important; 22 | padding: 0 8px!important; 23 | } 24 | 25 | .serverfolders-modal .form-tab button:hover{ 26 | color: var(--nox-white4)!important; 27 | border-bottom: 2px solid var(--nox-white4); 28 | } 29 | 30 | .serverfolders-modal .form-tab button.active{ 31 | color: var(--nox-white)!important; 32 | border-bottom: 2px solid var(--nox-white); 33 | } 34 | 35 | .serverfolders-modal .form-tabcontent{ 36 | background:transparent!important 37 | } 38 | .serverfolders-modal [class^="ui-color-picker-swatch"].large{ 39 | border-radius: 50%!important; 40 | margin-right: 5px; 41 | height:59px!important; 42 | width:59px!important; 43 | border: 0!important 44 | } 45 | .serverfolders-modal [class^="ui-color-picker-swatch"]{ 46 | margin-right: 2px; 47 | width:19px!important; 48 | height:19px!important; 49 | border-radius:50%!important; 50 | margin-bottom: 0!important 51 | } 52 | 53 | 54 | 55 | 56 | .foldercontainer { 57 | position: absolute; 58 | padding-top: 0px; 59 | padding-bottom: 20px; 60 | height: calc(100% - 0px); 61 | } 62 | .guildsWrapper-5TJh6A .guilds-1q_RqH > .guild-1EfMGQ:first-of-type .guildInner-3DSoA4 a::after { 63 | background: var(--nox-white1); 64 | } 65 | .guilds-1q_RqH .foldercontainer + div.guild-1EfMGQ .guildInner-3DSoA4 a::after{ 66 | background-color: var(--nox-white1); 67 | } 68 | .guilds-1q_RqH .foldercontainer + div.guild-1EfMGQ:hover { 69 | background-color: #3C3C3C; 70 | } 71 | .guild-1EfMGQ.folder .badge-1GsMF2.folder.count { 72 | bottom: unset; 73 | left: unset; 74 | top: 20px; 75 | right: -2px; 76 | background: var(--nox-accent); 77 | } 78 | .guildsWrapper-5TJh6A .guilds-1q_RqH { 79 | z-index: unset!important; 80 | } 81 | .guilds-1q_RqH .foldercontainer +.guild-1EfMGQ .guildInner-3DSoA4 a { 82 | margin-top: 30px!important; 83 | } 84 | .serverfolders-modal .da-inner .horizontal-1ae9ci { 85 | background: var(--nox-level3); 86 | box-shadow: none!important; 87 | } 88 | .serverfolders-modal .da-flex .da-horizontal { 89 | background-color: #303030; 90 | box-shadow: none!important; 91 | } -------------------------------------------------------------------------------- /legacy/plugins/serversearch.scss: -------------------------------------------------------------------------------- 1 | /* Server Search Plugin */ 2 | .avatar-search.guildIcon-CT-ZDq { 3 | background-size: 35%!important; 4 | } 5 | .avatar-search.guildIcon-CT-ZDq::after, 6 | .avatar-search.guildIcon-CT-ZDq::before { 7 | z-index: -1!important; 8 | } 9 | .avatar-search.guildIcon-CT-ZDq::after { 10 | background: var(--nox-white1)!important; 11 | } 12 | /* End Server Search Plugin */ -------------------------------------------------------------------------------- /legacy/plugins/serversorter.scss: -------------------------------------------------------------------------------- 1 | /*Server Sorter plugin*/ 2 | body #sort-options{ 3 | transform: scale(1,0.8); 4 | opacity:0; 5 | pointer-events: none; 6 | transition:transform 200ms cubic-bezier(.2,0,0,1), opacity 200ms ease, pointer-events 0ms 100ms; 7 | } 8 | body #sort-options.open{ 9 | opacity:1; 10 | pointer-events: initial; 11 | transition:transform 300ms cubic-bezier(.2,0,0,1), opacity 100ms ease, pointer-events 0ms; 12 | } 13 | body #sort-options .item{ 14 | opacity:0; 15 | transition:opacity 100ms; 16 | } 17 | body #sort-options.open .item{ 18 | opacity:1; 19 | transition:opacity 300ms 100ms; 20 | } 21 | /*/Server Sorter plugin*/ -------------------------------------------------------------------------------- /legacy/plugins/statuseverywhere.scss: -------------------------------------------------------------------------------- 1 | .chat-2ZfjoI .image-33JSyf.large-3ChYtB { 2 | z-index: 5; 3 | position: relative; 4 | } 5 | 6 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE, 7 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.typing-2GQL18 { 8 | right: -6px!important; 9 | bottom: -6px!important; 10 | top: -6px; 11 | bottom: -6px; 12 | width: 100%!important; 13 | height: 100%!important; 14 | padding: 3px; 15 | border: 3px solid #636b75; 16 | background: none; 17 | z-index: 0; 18 | pointer-events: none; 19 | } 20 | 21 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.typing-2GQL18 { 22 | // z-index: 1; 23 | background: rgba(0,0,0,0.4); 24 | } 25 | 26 | @keyframes typing { 27 | 0% { 28 | opacity: 0.5; 29 | } 30 | 70% { 31 | opacity: 1; 32 | } 33 | 100% { 34 | opacity: 0.5; 35 | } 36 | } 37 | 38 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.typing-2GQL18 { 39 | animation: typing 1.2s linear infinite; 40 | } 41 | 42 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.idle-3DEnRT { 43 | border-color: #faa61a !important; 44 | } 45 | 46 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.dnd-1_xrcq { 47 | border-color: #f04747 !important; 48 | } 49 | 50 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.streaming-2_dnHe { 51 | animation: streaming-flash 1.5s linear infinite !important; 52 | border-color: #643da7 !important; 53 | } 54 | 55 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.online-2S838R { 56 | border-color: #43b581 !important; 57 | } 58 | 59 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.offline-3qoTek { 60 | border-color: #636b75 !important; 61 | } 62 | 63 | .chat-2ZfjoI .large-3ChYtB .status-oxiHuE.invisible-1kp8Z0 { 64 | border-color: #747f8d !important; 65 | } -------------------------------------------------------------------------------- /legacy/popouts/addgame.scss: -------------------------------------------------------------------------------- 1 | .addGamePopout-2RY8Ju .buttonGreyLinkDefault-3eCAFJ{ 2 | background:#393939; 3 | } 4 | .addGamePopout-2RY8Ju .buttonGreyLinkDefault-3eCAFJ:hover{ 5 | background:#3B3B3B; 6 | } 7 | 8 | .theme-dark .addGamePopout-2RY8Ju{ 9 | background:var(--nox-level1); 10 | } 11 | 12 | .addGamePopout-2RY8Ju .divider-3573oO { 13 | opacity: 0; 14 | margin: 4px 0; 15 | } -------------------------------------------------------------------------------- /legacy/popouts/addrole.scss: -------------------------------------------------------------------------------- 1 | // .container-VSDcQc 2 | 3 | .container-VSDcQc .autocompleteArrow-Zxoy9H { 4 | background: var(--nox-level3); 5 | } 6 | 7 | .container-VSDcQc .autocompleteHeaderBackground-30T70q { 8 | background: var(--nox-level3); 9 | } 10 | 11 | .popouts-3dRSmE .container-VSDcQc .sectionTag-pXyto9 { 12 | background: var(--nox-level2); 13 | } 14 | 15 | .container-VSDcQc .row-rrHHJU.selected-1pIgLL { 16 | background: var(--nox-level1); 17 | } 18 | 19 | .container-VSDcQc .row-rrHHJU.selected-1pIgLL:active { 20 | background: var(--nox-level3); 21 | } 22 | 23 | .container-3XJ8ns { 24 | background: var(--nox-level2); 25 | } 26 | -------------------------------------------------------------------------------- /legacy/popouts/attach.scss: -------------------------------------------------------------------------------- 1 | /* Spotify Attach Popout */ 2 | .popout-3sVMXz .attachPopout-1n-ZKM { 3 | background: var(--nox-level2); 4 | box-shadow: 0 5px 20px rgba(0,0,0,.3); 5 | overflow: hidden; 6 | border-radius: 4px; 7 | margin-bottom: -15px; 8 | } 9 | 10 | .attachPopoutIcon-26Np2W[name="Upload"] { 11 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTIgMTIuNUMyIDkuNDYgNC40NiA3IDcuNSA3SDE4YzIuMjEgMCA0IDEuNzkgNCA0cy0xLjc5IDQtNCA0SDkuNUM4LjEyIDE1IDcgMTMuODggNyAxMi41UzguMTIgMTAgOS41IDEwSDE3djJIOS40MWMtLjU1IDAtLjU1IDEgMCAxSDE4YzEuMSAwIDItLjkgMi0ycy0uOS0yLTItMkg3LjVDNS41NyA5IDQgMTAuNTcgNCAxMi41UzUuNTcgMTYgNy41IDE2SDE3djJINy41QzQuNDYgMTggMiAxNS41NCAyIDEyLjV6Ii8+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==)!important; 12 | background-size: 21px !important; 13 | background-position: 50%!important; 14 | background-repeat: no-repeat!important; 15 | 16 | } 17 | 18 | .attachPopoutIcon-26Np2W[name="Upload"] .attachPopoutIconForeground-OohRrL {fill: transparent} 19 | 20 | .attachPopoutIcon-26Np2W { 21 | opacity: 0.4; 22 | } 23 | 24 | .attachPopout-1n-ZKM .attachPopoutRow-KrE-f6:hover { 25 | background-color: rgba(225, 225, 225, 0.03)!important; 26 | } 27 | 28 | .attachButtonPlay-ZnFdQr { 29 | fill: white!important; 30 | position: absolute; 31 | } 32 | 33 | /* End Spotify Attach Popout */ -------------------------------------------------------------------------------- /legacy/popouts/autocomplete.scss: -------------------------------------------------------------------------------- 1 | /* Autocomplete modal */ 2 | // .theme-dark #autocomplete-popout section { 3 | // background: var(--nox-level1); 4 | // } 5 | // .autocomplete-1vrmpx { 6 | // background: var(--nox-level2); 7 | // box-shadow: 0 5px 20px rgba(0,0,0,.3); 8 | // border-radius: 4px; 9 | // } 10 | // .autocomplete-1vrmpx header { 11 | // background: var(--nox-level3) 12 | // } 13 | 14 | // .theme-dark .autocomplete-1vrmpx .autocompleteRow-2OthDa.selected-1Tbx07 { 15 | // background: var(--nox-level2) 16 | // } 17 | 18 | // .theme-dark .autocomplete-1vrmpx .autocompleteRow-2OthDa { 19 | // background: var(--nox-level1) 20 | // } 21 | 22 | // .autocomplete-1vrmpx .empty h4 { 23 | // color: var(--nox-accent); 24 | // } 25 | 26 | // .autocomplete-1vrmpx .autocompleteRow-2OthDa.selected-1Tbx07, 27 | // .autocomplete-1vrmpx .autocompleteRow-2OthDa:hover { 28 | // background: #181818 29 | // } 30 | 31 | // .autocomplete-1vrmpx .autocompleteRow-2OthDa { 32 | // transition: all 50ms ease; 33 | // } 34 | 35 | // .autocomplete-1vrmpx .scroller::-webkit-scrollbar { 36 | // display: none 37 | // } 38 | // .autocomplete-1vrmpx .empty p, 39 | // .autocomplete-1vrmpx .autocompleteRow-2OthDa a{ 40 | // color:var(--nox-white3); 41 | // } 42 | // .autocomplete-1vrmpx .autocompleteRow-2OthDa.selected-1Tbx07 a, 43 | // .autocomplete-1vrmpx .autocompleteRow-2OthDa:hover a{ 44 | // color:var(--nox-white4); 45 | // } 46 | // .autocomplete-1vrmpx .empty:hover{ 47 | // background:transparent; 48 | // } 49 | .theme-dark .selected-1Tbx07 { 50 | background-color: rgba(255, 255, 255, 0.1); 51 | } 52 | /* End autocomplete modal */ -------------------------------------------------------------------------------- /legacy/popouts/generic.scss: -------------------------------------------------------------------------------- 1 | .popout-3sVMXz { 2 | box-shadow:0 5px 15px rgba(0,0,0,.3)!important; 3 | } 4 | 5 | // .popout-3sVMXz section { 6 | // background: var(--nox-level2)!important; 7 | // transition: all 100ms ease; 8 | // } 9 | 10 | .popout-3sVMXz header { 11 | background: var(--nox-accent); 12 | } 13 | 14 | .popout-3sVMXz.popoutBottomRight-2JrySt header:before, 15 | .popout-3sVMXz.popoutBottom-1YbShG header:before{ 16 | border-bottom-color: var(--nox-accent); 17 | } 18 | 19 | .popout-3sVMXz .footer-3J5oP4 { 20 | background: var(--nox-level2); 21 | } 22 | 23 | .popout-3sVMXz .players-1zg2l8 { 24 | background: var(--nox-level1); 25 | } 26 | 27 | .popout-3sVMXz .news-2KwXHF { 28 | background-color: var(--nox-level1); 29 | } 30 | 31 | .popout-3sVMXz .newsEmpty-3tvLgI { 32 | filter: brightness(60%); 33 | } 34 | 35 | 36 | 37 | @keyframes bottompopout { 38 | from { 39 | transform: translate(0, 55px); 40 | opacity: 0; 41 | } 42 | } 43 | 44 | 45 | 46 | @keyframes toppopout { 47 | from { 48 | transform: translate(0, -55px); 49 | opacity: 0; 50 | } 51 | } 52 | 53 | 54 | // .theme-dark .container-2XeR5Z { 55 | // background-color: var(--nox-level2); 56 | // } 57 | 58 | .theme-dark .tag-2gHSR7 { 59 | background-color: var(--nox-level1); 60 | } 61 | 62 | .theme-dark .tag-2gHSR7:hover { 63 | background-color: var(--nox-white1); 64 | } -------------------------------------------------------------------------------- /legacy/popouts/gifpicker.scss: -------------------------------------------------------------------------------- 1 | .container-3ISnnM { 2 | box-shadow: 0 0 0 1px var(--nox-level3), 0 5px 10px rgba(0, 0, 0, 0.3); 3 | } 4 | 5 | .container-3ISnnM .header-1TOWci { 6 | background: var(--nox-level3); 7 | padding: 6px; 8 | } 9 | 10 | .container-3ISnnM .content-ySCtCx { 11 | background: var(--nox-level2); 12 | } 13 | 14 | .container-3ISnnM .searchBar--fTZYa { 15 | background: none; 16 | } 17 | 18 | .container-3ISnnM .focused-1En8bG:after, 19 | .container-3ISnnM .result-3w1ZcL:hover:after { 20 | box-shadow: inset 0 0 0 2px var(--nox-accent), inset 0 0 0 3px #2f3136; 21 | } 22 | 23 | .container-3ISnnM .searchSuggestion-2K8OBX.searchSuggestion-2K8OBX:hover { 24 | background-color: var(--nox-accent); 25 | border-color: var(--nox-accent); 26 | } 27 | 28 | .result-3w1ZcL { 29 | background-color: var(--nox-level1); 30 | } 31 | 32 | .result-3w1ZcL[style*="background-color"] { 33 | background-color: var(--nox-accent)!important; 34 | } 35 | 36 | .result-3w1ZcL[style*="background-color: rgb(24, 25, 28);"] { 37 | background-color: var(--nox-level1)!important; 38 | } 39 | 40 | .container-3ISnnM .categoryFadeBlurple-1j72_A { 41 | background: none; 42 | overflow: hidden; 43 | } 44 | 45 | .categoryFadeBlurple-1j72_A::after { 46 | display: block; 47 | content: ""; 48 | background: var(--nox-accent); 49 | height: 100%; 50 | opacity: 0.8; 51 | } 52 | 53 | .emptyHint-2ZHXNQ .emptyHintCard-2mUdMe { 54 | background: var(--nox-level1); 55 | } 56 | 57 | //backButton-JyKGC1 da-backButton 58 | 59 | // .backButton-JyKGC1, 60 | // .backButton-JyKGC1:hover, 61 | // .backButton-JyKGC1:active { 62 | // padding: 0; 63 | // background: none; 64 | // min-height: unset; 65 | // filter: none !important; 66 | // box-shadow: none; 67 | // transform: none; 68 | // width: 48px; 69 | // } 70 | 71 | // .backButton-JyKGC1:active { 72 | // color: #dcddde; 73 | // } 74 | 75 | .backButton-JyKGC1 { 76 | position: relative; 77 | width: 28px; 78 | // height: 100%; 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | } 83 | 84 | .backButton-JyKGC1::after{ 85 | content:""; 86 | background:var(--nox-white); 87 | border-radius:50%; 88 | display:block; 89 | width:100%; 90 | height:100%; 91 | position:absolute; 92 | opacity:0; 93 | transition:300ms ease; 94 | } 95 | .backButton-JyKGC1:active::after{ 96 | opacity:0.1; 97 | animation:scale 100ms cubic-bezier(.4,0,0,1),opacity 100ms ease; 98 | } 99 | .backButton-JyKGC1:active{ 100 | background-color:transparent; 101 | transform:none; 102 | } 103 | 104 | 105 | -------------------------------------------------------------------------------- /legacy/popouts/inbox.scss: -------------------------------------------------------------------------------- 1 | // Common 2 | .recentMentionsPopout-3rCiI6 { 3 | background: var(--nox-level1); 4 | } 5 | 6 | .recentMentionsPopout-3rCiI6 .header-ykumBX { 7 | background: var(--nox-level3); 8 | } 9 | 10 | .recentMentionsPopout-3rCiI6 .avatar-1BDn8e { 11 | margin-top: -10px; 12 | } 13 | 14 | .header-2-Imhb .secondary-dIudih { 15 | background: var(--nox-level2); 16 | } 17 | 18 | .header-2-Imhb .secondary-dIudih:hover { 19 | background: rgba(255, 255, 255, 0.1); 20 | } 21 | 22 | .recentMentionsPopout-3rCiI6 .header-ykumBX { 23 | background-image: url('data:image/svg+xml;utf8,'); 24 | background-size: 24px; 25 | background-repeat: no-repeat; 26 | background-position: 2.5% 50%; 27 | } 28 | 29 | .messagesPopoutWrap-1MQ1bW.recentMentionsPopout-3rCiI6 .header-ykumBX { 30 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDI0IDI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSJub25lIiBkPSJNMCwwaDI0djI0SDBWMHoiLz4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMC45LDEwLjZjLTAuOC01LjEtNi4xLTguOS0xMS43LTcuMWMtMi43LDAuOS00LjgsMy01LjcsNS43Yy0xLjksNS42LDEuOSwxMC45LDcuMSwxMS43DQoJYzEuNywwLjMsMy40LDAsNC45LTAuNmMxLTAuNCwxLjktMSwyLjctMS43bC0xLjQtMS41Yy0wLjYsMC42LTEuMywxLTIuMiwxLjRjLTEuMywwLjUtMi43LDAuNy00LjIsMC4zYy0yLjYtMC42LTQuNy0yLjgtNS4yLTUuNQ0KCWMtMC45LTQuOSwzLjMtOS4xLDguMi04LjJjMi44LDAuNSw0LjksMi42LDUuNSw1LjNjMC4yLDEuMiwwLjIsMi4zLTAuMSwzLjNjLTAuMSwwLjUtMC42LDAuOC0xLjEsMC44Yy0wLjYsMC0xLjEtMC41LTEuMS0xLjFWNy43DQoJaC0ydjAuNUMxMy44LDcuNywxMyw3LjQsMTIsNy40Yy0yLjUsMC00LjYsMi4xLTQuNiw0LjZzMi4xLDQuNiw0LjYsNC42YzEuMiwwLDIuNC0wLjUsMy4yLTEuM2MwLjYsMC44LDEuNSwxLjMsMi41LDEuMw0KCWMxLjQsMCwyLjYtMC45LDMtMi4zQzIxLDEzLjIsMjEuMSwxMS45LDIwLjksMTAuNnogTTEyLDE0LjZjLTEuNCwwLTIuNi0xLjItMi42LTIuNnMxLjItMi42LDIuNi0yLjZzMi42LDEuMiwyLjYsMi42DQoJUzEzLjQsMTQuNiwxMiwxNC42eiIvPg0KPC9zdmc+DQo=); 31 | background-size: 24px; 32 | background-repeat: no-repeat; 33 | background-position: 2.5% 50%; 34 | } 35 | 36 | .messagesPopoutWrap-1MQ1bW .wrapper-2a6GCs::before, 37 | .recentMentionsPopout-3rCiI6 .wrapper-2a6GCs::before { 38 | content: ""; 39 | width: 0px; 40 | height: 0px; 41 | position: relative; 42 | left: -20px; 43 | top: 0px; 44 | display: block; 45 | transition: all 200ms ease; 46 | border-style: solid; 47 | border-width: 0 10px 10px 0; 48 | border-color: transparent rgba(0, 0, 0, .1) transparent transparent; 49 | } 50 | 51 | .recentMentionsPopout-3rCiI6 .header-ykumBX .tabBar-1kuXvJ { 52 | margin-left: 5%; 53 | } 54 | 55 | .recentMentionsPopout-3rCiI6 .header-2-Imhb .tabBar-1kuXvJ .item-3XjbnG.active-1MbGPa { 56 | background: var(--nox-accent); 57 | } 58 | 59 | // Mentions 60 | .recentMentionsPopout-3rCiI6 .messagesPopout-24nkyi { 61 | padding-top: 10px; 62 | } 63 | 64 | .container-3iAQ-0 { 65 | border: 1px solid var(--nox-level2); 66 | border-radius: 5px; 67 | margin: 0 9px 16px 16px; 68 | padding: 0; 69 | overflow: hidden; 70 | } 71 | 72 | .channelHeader-3Gd2xq { 73 | background: var(--nox-level2); 74 | } 75 | 76 | .messageContainer-gbhlwo { 77 | background: none; 78 | } 79 | 80 | .recentMentionsPopout-3rCiI6 .jumpButton-2dvRSC { 81 | background-color: var(--nox-level2); 82 | right: 30px; 83 | } 84 | 85 | 86 | // Inbox 87 | 88 | .container-enaOkj .channel-3pEHab { 89 | border: 1px solid var(--nox-level2); 90 | border-radius: 5px; 91 | margin: 8px 0; 92 | padding: 0; 93 | overflow: hidden; 94 | } 95 | 96 | .container-enaOkj .channelHeader-3Gd2xq { 97 | padding: 12px 16px 12px 24px; 98 | } 99 | 100 | .container-enaOkj .collapseButton-2ZsEjz { 101 | left: 0; 102 | } 103 | 104 | .container-enaOkj .guildIcon-3Co6k- { 105 | background-color: transparent; 106 | } 107 | 108 | .channelHeader-3Gd2xq .tertiary-aMXF0g { 109 | background: transparent; 110 | } 111 | 112 | .channelHeader-3Gd2xq .tertiary-aMXF0g:hover { 113 | background: rgba(255, 255, 255, 0.1); 114 | } 115 | 116 | .container-enaOkj .messages-3G3erD { 117 | background: none; 118 | } 119 | 120 | .container-enaOkj .messageContainer-1ei2zM { 121 | margin-bottom: 10px; 122 | } 123 | 124 | .container-enaOkj .jumpButton-2dvRSC { 125 | right: 15px; 126 | } -------------------------------------------------------------------------------- /legacy/popouts/list.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .popoutList-T9CKZQ{ 2 | background:var(--nox-level2); 3 | box-shadow: 0 5px 20px rgba(0,0,0,.3); 4 | border-radius: 4px; 5 | } 6 | 7 | .popoutList-T9CKZQ .searchBar-1MOL6S { 8 | background: none; 9 | border-radius: 0; 10 | } 11 | 12 | .popoutList-T9CKZQ .searchBar-1MOL6S input { 13 | color: var(--nox-white)!important; 14 | border-bottom: 2px solid var(--nox-white1); 15 | padding-bottom: 3px; 16 | padding-right: 25px; 17 | height: 30px; 18 | border-radius: 0; 19 | } 20 | 21 | .popoutList-T9CKZQ .searchBar-1MOL6S input:focus { 22 | border-bottom: 2px solid var(--nox-accent); 23 | } 24 | 25 | .theme-dark .elevationBorderHigh-2WYJ09{ 26 | box-shadow:0 5px 10px rgba(0,0,0,.3),0 1px 0px rgba(255,255,255,.02) inset; 27 | } 28 | 29 | .themedPopout-25DgLi { 30 | border: none!important; 31 | border-radius: 3px!important; 32 | overflow: hidden; 33 | } 34 | .popout-3sVMXz .themedPopout-25DgLi .header-SsaQ8X { 35 | border-radius: 3px 3px 0 0; 36 | box-shadow:0 3px 10px rgba(0, 0, 0, .3); 37 | } 38 | 39 | .popoutList-T9CKZQ .selectableItem-1MP3MQ:hover { 40 | background: var(--nox-level3); 41 | } 42 | 43 | .selectableItem-1MP3MQ.selected-31soGA { 44 | background: var(--nox-accent) !important; 45 | } 46 | 47 | .popoutList-T9CKZQ .divider-3573oO { 48 | opacity: 0; 49 | margin: 4px 0; 50 | } -------------------------------------------------------------------------------- /legacy/popouts/mentioneveryone.scss: -------------------------------------------------------------------------------- 1 | .popout-2iWAc- .everyonePopout-nEbJY3 { 2 | background: var(--nox-level1); 3 | } 4 | 5 | .everyonePopout-nEbJY3 .footer-2aTx0s { 6 | background: var(--nox-level2); 7 | } -------------------------------------------------------------------------------- /legacy/popouts/option.scss: -------------------------------------------------------------------------------- 1 | .layer-v9HyYc .container-3cGP6G { 2 | background:#353535; 3 | border-color:#353535; 4 | border-radius:2px; 5 | cursor: pointer; 6 | padding: 0; 7 | } 8 | .container-3cGP6G .item-1Yvehc { 9 | color:var(--nox-white4); 10 | background: none; 11 | padding: 2px !important; 12 | min-height: unset; 13 | margin: 0; 14 | border-radius: 0; 15 | width: 100%; 16 | transform: none!important; 17 | box-shadow: none!important; 18 | } 19 | .container-3cGP6G .item-1Yvehc:hover { 20 | color:var(--nox-white7); 21 | background:rgba(255,255,255,.05); 22 | transform: none; 23 | } 24 | .container-3cGP6G .item-1Yvehc:active { 25 | color:var(--nox-white7); 26 | background:rgba(0,0,0,.1); 27 | transform: none; 28 | } -------------------------------------------------------------------------------- /legacy/popouts/rtcconnection.scss: -------------------------------------------------------------------------------- 1 | .layer-v9HyYc .container-2x5lvQ section { 2 | background: var(--nox-level2)!important; 3 | transition: all 100ms ease; 4 | } 5 | 6 | .layer-v9HyYc .container-2x5lvQ .header-2C89wJ { 7 | background: var(--nox-accent); 8 | } 9 | 10 | // .popout-2GtBL-:after{ 11 | // border-top-color:var(--nox-level2); 12 | // } 13 | 14 | // .popouts-3dRSmE .popoutTop-3uu9vG::after, 15 | // .popouts-3dRSmE .popoutTopLeft-b5Eb3O::after, 16 | // .popouts-3dRSmE .popoutTopRight-3BzFIE::after { 17 | // border-top-color: var(--nox-level2) !important; 18 | // } -------------------------------------------------------------------------------- /legacy/popouts/stickerpicker.scss: -------------------------------------------------------------------------------- 1 | .container-2XeR5Z, 2 | .wrapper-2Gsate.categoryList-xW5xXr, 3 | .inspector-S2gM3e { 4 | background: var(--nox-level3); 5 | } 6 | 7 | .wrapper-1-Fsb8 { 8 | background: var(--nox-level3); 9 | height: auto; 10 | padding: 4px; 11 | border-radius: 5px; 12 | } 13 | 14 | .stickerInspected-2EM4w- .inspectedIndicator-59EII8 { 15 | background: var(--nox-white1); 16 | } 17 | 18 | .premiumCategorySelected-23oFPJ, .premiumCategorySelected-23oFPJ:hover, .stickerCategoryRecentSelected-2gbLs2, .stickerCategoryRecentSelected-2gbLs2:hover { 19 | background: var(--nox-white1); 20 | } -------------------------------------------------------------------------------- /legacy/popouts/toasts.scss: -------------------------------------------------------------------------------- 1 | .toast, 2 | .bd-toast { 3 | background: var(--nox-level2); 4 | } -------------------------------------------------------------------------------- /legacy/popouts/voiceconnection.scss: -------------------------------------------------------------------------------- 1 | .container-1giJp5 { 2 | background: linear-gradient(180deg, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.1)); 3 | background-color: var(--nox-level3); 4 | transition: all 500ms ease; 5 | border:none; 6 | } 7 | 8 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ { 9 | opacity:.3; 10 | background-size:60%!important; 11 | background-position:50%!important; 12 | transition:all 50ms ease, background 100ms ease!important; 13 | background-color: transparent; 14 | } 15 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ:active { 16 | transition:all 0ms ease, background 100ms ease!important; 17 | } 18 | 19 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ:hover { 20 | opacity: .7; 21 | } 22 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ:active { 23 | opacity: 1; 24 | } 25 | 26 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ::after { 27 | width:100%; 28 | height:100%; 29 | background: var(--nox-white); 30 | content: ""; 31 | display: block; 32 | border-radius: 50%; 33 | opacity: 0; 34 | position: absolute; 35 | left:calc(50% - 1px); 36 | top:calc(50% + 0px); 37 | -ms-transform:translate(-50%,-50%) scale(1.3); 38 | transform:translate(-50%,-50%) scale(1.3); 39 | transition: 300ms ease; 40 | pointer-events: none; 41 | } 42 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ:active::after { 43 | opacity: 0.1; 44 | -ms-transform:translate(-50%,-50%) scale(1.3); 45 | transform:translate(-50%,-50%) scale(1.3); 46 | animation:scale-center 200ms cubic-bezier(0,0,0,1); 47 | transition: 0ms ease; 48 | } 49 | 50 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ.popout-open{ 51 | opacity:0.8; 52 | } 53 | .container-1giJp5 .horizontal-1ae9ci .button-14-BFJ.popout-open::after{ 54 | opacity: 0.1; 55 | } 56 | 57 | .buttonInfo-3nkbOt { 58 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMSAxNWgtMnYtNmgydjZ6bTAtOGgtMlY3aDJ2MnoiLz48L3N2Zz4=) !important; 59 | } 60 | .buttonDisconnect-3W_SJc { 61 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgOWMtMS42IDAtMy4xNS4yNS00LjYuNzJ2My4xYzAgLjM5LS4yMy43NC0uNTYuOS0uOTguNDktMS44NyAxLjEyLTIuNjYgMS44NS0uMTguMTgtLjQzLjI4LS43LjI4LS4yOCAwLS41My0uMTEtLjcxLS4yOUwuMjkgMTMuMDhjLS4xOC0uMTctLjI5LS40Mi0uMjktLjcgMC0uMjguMTEtLjUzLjI5LS43MUMzLjM0IDguNzggNy40NiA3IDEyIDdzOC42NiAxLjc4IDExLjcxIDQuNjdjLjE4LjE4LjI5LjQzLjI5LjcxIDAgLjI4LS4xMS41My0uMjkuNzFsLTIuNDggMi40OGMtLjE4LjE4LS40My4yOS0uNzEuMjktLjI3IDAtLjUyLS4xMS0uNy0uMjgtLjc5LS43NC0xLjY5LTEuMzYtMi42Ny0xLjg1LS4zMy0uMTYtLjU2LS41LS41Ni0uOXYtMy4xQzE1LjE1IDkuMjUgMTMuNiA5IDEyIDl6Ii8+PC9zdmc+); 62 | } -------------------------------------------------------------------------------- /legacy/sections/activityfeed.scss: -------------------------------------------------------------------------------- 1 | /* Activity Feed */ 2 | #app-mount .activityFeed-1C0EmJ, 3 | .activityFeed-1C0EmJ .feed-1o0xmF { 4 | background: var(--nox-level1); 5 | } 6 | 7 | .card-GqTca8 { 8 | box-shadow: 0 5px 5px var(--nox-black4); 9 | } 10 | 11 | .card-GqTca8, 12 | .card-GqTca8 .cardBody-3kgGGF, 13 | .card-GqTca8 .cardBody-3_HhbX, 14 | .card-GqTca8 .popoutContainer-3WC9HR, 15 | .card-GqTca8.outer-2IVh5n { 16 | background: var(--nox-level2); 17 | } 18 | 19 | .card-GqTca8 .section-2VKIPC, 20 | .card-GqTca8 .cardHeader-ey0m8X, 21 | .card-GqTca8 .cardHeader-3nTWsD { 22 | background: var(--nox-level3); 23 | } 24 | 25 | .card-GqTca8 .cardHeader-ey0m8X:hover, 26 | .card-GqTca8 .cardHeader-3nTWsD:hover { 27 | background: var(--nox-level2); 28 | } 29 | 30 | .card-GqTca8 .title-3sZWYQ { 31 | padding: 5px 0 0 8px; 32 | } 33 | 34 | // .card-GqTca8 .cardHeader-ey0m8X::after, 35 | // .card-GqTca8 .cardHeader-3nTWsD::after { 36 | // content: ""; 37 | // position: absolute; 38 | // top: 0; 39 | // right: 0; 40 | // bottom: 0; 41 | // left: 0; 42 | // } 43 | 44 | // .card-GqTca8 .cardHeader-ey0m8X:hover::after, 45 | // .card-GqTca8 .cardHeader-3nTWsD:hover::after { 46 | // background: var(--nox-accent); 47 | // opacity: 0.05; 48 | // } 49 | 50 | .theme-dark .lookFilled-1Gx00P.colorPrimary-3b3xI6 { 51 | background: var(--nox-level1); 52 | } 53 | 54 | .card-GqTca8 .button-38aScr { 55 | margin-bottom: 0!important; 56 | } 57 | 58 | .dock-1-sUKH { 59 | margin-top: 5px; 60 | padding-bottom: 5px; 61 | } 62 | .overflowMenu-3mlkvt, 63 | .dock-1-sUKH .dockItem-2kQDqg button { 64 | margin: 0; 65 | } 66 | 67 | .dock-1-sUKH .dockItem-2kQDqg:hover { 68 | background: var(--nox-level2); 69 | box-shadow: 0 5px 5px var(--nox-black4); 70 | } 71 | 72 | .overflowMenu-3mlkvt { 73 | opacity: 1; 74 | } 75 | 76 | .buttonText-13IoY7 { 77 | padding: 0; 78 | } 79 | 80 | .card-GqTca8 .lookBlank-3eh9lL, 81 | .card-GqTca8 .lookBlank-3eh9lL:hover, 82 | .card-GqTca8 .lookBlank-3eh9lL:active, 83 | .overflowMenu-npo2XH, 84 | .overflowMenu-npo2XH:hover, 85 | .overflowMenu-npo2XH:active { 86 | background: none!important; 87 | transform: none!important; 88 | box-shadow: none!important; 89 | filter: none!important; 90 | padding: 0; 91 | min-height: unset; 92 | color: white!important; 93 | } 94 | 95 | .card-GqTca8 .lookBlank-3eh9lL::after, 96 | .overflowMenu-npo2XH::after { 97 | content:""; 98 | background:var(--nox-white); 99 | border-radius:50%; 100 | display:block; 101 | width:100%; 102 | padding-top:100%; 103 | height:0; 104 | position:absolute; 105 | opacity:0; 106 | transform:scale(1.4); 107 | transition:all 300ms ease, visibility 0ms 300ms; 108 | animation-fill-mode: forwards; 109 | visibility: hidden; 110 | pointer-events: none; 111 | top: 0; 112 | } 113 | 114 | .card-GqTca8 .lookBlank-3eh9lL:active::after, 115 | .overflowMenu-npo2XH:active::after { 116 | opacity:0.1; 117 | transition:all 300ms ease, visibility 0ms; 118 | visibility: visible; 119 | animation:scale 100ms cubic-bezier(.2,0,0,1),opacity 50ms ease; 120 | } 121 | /* /Activity Feed */ 122 | .pagination-1GYdtQ .paginationItem-2lUq0s { 123 | box-shadow: 0 5px 5px var(--nox-black4); 124 | } 125 | 126 | .pagination-1GYdtQ .paginationItem-2lUq0s::after { 127 | background: linear-gradient(270deg,transparent 0, var(--nox-level3)); 128 | } 129 | 130 | .pagination-1GYdtQ .scroller-2FKFPG { 131 | padding-bottom: 5px; 132 | } 133 | 134 | .carousel-2WxMes { 135 | box-shadow: 0 5px 5px var(--nox-black4); 136 | } 137 | 138 | .news-1uHrMX, 139 | .carousel-JbsNzL, 140 | .article-3kb3qm { 141 | background: var(--nox-level3); 142 | } 143 | 144 | .news-1uHrMX:hover { 145 | background: var(--nox-level3); 146 | } 147 | 148 | .news-1uHrMX:hover .background-3zYSQO { 149 | filter: brightness(125%); 150 | } 151 | 152 | 153 | .popouts-3dRSmE .gamePreview-9weYR2 { 154 | background: var(--nox-level2); 155 | } 156 | 157 | .gamePreview-9weYR2 .body-1SVoBw { 158 | background: var(--nox-level1); 159 | } 160 | 161 | 162 | .coloredBackground-37Z6Gv { 163 | background: url(/assets/0858a3392fd80f98d8957ad7c3e195d3.svg) no-repeat 100% 0 var(--nox-accent); 164 | } 165 | 166 | .grid-1rkoVH { 167 | padding: 0 6px; 168 | column-gap: 6px; 169 | } -------------------------------------------------------------------------------- /legacy/sections/call.scss: -------------------------------------------------------------------------------- 1 | .call-avatar .avatar-xxlarge { 2 | transition: transform 400ms cubic-bezier(0, 0, 0, 1), opacity 400ms cubic-bezier(0, 0, 0, 1), box-shadow 400ms cubic-bezier(0, 0, 0, 1); 3 | cursor: pointer; 4 | } 5 | 6 | .call-avatar .avatar-xxlarge:hover { 7 | -ms-transform: scale(0.98); 8 | transform: scale(0.98); 9 | opacity: 0.8; 10 | } 11 | 12 | .call-avatar .avatar-xxlarge.speaking { 13 | transition: transform 400ms cubic-bezier(0, 0, 0, 1), opacity 300ms cubic-bezier(0, 0, 0, 1), box-shadow 100ms cubic-bezier(0, 0, 0, 1)!important; 14 | box-shadow: 0 0 0 3px var(--nox-level3) inset, 0 0 0 5px #43B581, 0 0 10px 5px rgba(67, 181, 129,.2)!important; 15 | border:none!important; 16 | } 17 | 18 | .incomingCall-14zLcL .incomingCallInner-2VmFiR { 19 | background: var(--nox-level3); 20 | box-shadow: 0 10px 20px rgba(0, 0, 0, .6), 0 1px 2px rgba(255, 255, 255, .05) inset; 21 | border:none; 22 | border-radius:2px; 23 | } 24 | .incomingCallInner-2VmFiR .subtitle-1H8FPn { 25 | color:var(--nox-white4); 26 | } 27 | // .incomingCall-14zLcL .button-38aScr .actionIcon--D_WrW { 28 | // background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNNi42MiAxMC43OWMxLjQ0IDIuODMgMy43NiA1LjE0IDYuNTkgNi41OWwyLjItMi4yYy4yNy0uMjcuNjctLjM2IDEuMDItLjI0IDEuMTIuMzcgMi4zMy41NyAzLjU3LjU3LjU1IDAgMSAuNDUgMSAxVjIwYzAgLjU1LS40NSAxLTEgMS05LjM5IDAtMTctNy42MS0xNy0xNyAwLS41NS40NS0xIDEtMWgzLjVjLjU1IDAgMSAuNDUgMSAxIDAgMS4yNS4yIDIuNDUuNTcgMy41Ny4xMS4zNS4wMy43NC0uMjUgMS4wMmwtMi4yIDIuMnoiLz48L3N2Zz4=); 29 | // } 30 | 31 | .incomingCall-14zLcL { 32 | z-index: 1000000000000; 33 | } 34 | 35 | .incomingCall-14zLcL .button-38aScr + .button-38aScr { 36 | margin-right: 0px; 37 | margin-left: 0px; 38 | } 39 | 40 | 41 | .theme-dark .private-channel-call.minimum .private-channel-call-actions .center{ 42 | background:var(--nox-level2); 43 | border-color:var(--nox-level2); 44 | } 45 | 46 | 47 | 48 | .connecting { 49 | z-index: 10000000; 50 | background: #2B2B2B; 51 | } 52 | 53 | .connecting video.ready { 54 | filter: grayscale(100); 55 | background: #593695!important; 56 | } 57 | 58 | 59 | 60 | 61 | .ui-call-avatar.voice .ui-call-avatar-status.muted{ 62 | animation:scale 500ms cubic-bezier(.65,0,0,1.39); 63 | } 64 | 65 | 66 | .wrapper-35wsBm { 67 | background: none !important; 68 | border: none !important; 69 | } -------------------------------------------------------------------------------- /legacy/sections/discovery.scss: -------------------------------------------------------------------------------- 1 | // sidebar 2 | .sidebar-2K8pFh { 3 | background-color: var(--nox-level2); 4 | } 5 | 6 | .categoryItem-3zFJns .itemInner-3gVXMG:hover { 7 | background-color: rgba(255, 255, 255, 0.1); 8 | } 9 | 10 | .categoryItem-3zFJns .itemInner-3gVXMG:active { 11 | background-color: rgba(0, 0, 0, 0.3); 12 | } 13 | 14 | .categoryItem-3zFJns.selectedCategoryItem-3X8ujp .itemInner-3gVXMG { 15 | background-color: var(--nox-accent); 16 | } 17 | 18 | // content area 19 | .content-98HsJk .pageWrapper-1PgVDX { 20 | background-color: var(--nox-level1); 21 | } 22 | 23 | .footerImage-1CwWjz, 24 | .headerImage-3X1tyY { 25 | filter: grayscale(100%) brightness(50%); 26 | } 27 | 28 | .pageWrapper-1PgVDX .input-cIJ7To:focus { 29 | box-shadow: none!important; 30 | } 31 | 32 | .search-1iTphC .searchBox-2_mAlO:focus, 33 | .search-1iTphC .searchBox-2_mAlO:focus-within { 34 | box-shadow: 0 0 0 1px var(--nox-accent), 0 0 0 2px var(--nox-accent), 0 0 0 3px var(--nox-accent); 35 | } 36 | 37 | .pageWrapper-1PgVDX .card-3DjzTQ, 38 | .pageWrapper-1PgVDX .iconMask-3b8GzQ { 39 | background-color: var(--nox-level3); 40 | } 41 | 42 | .pageWrapper-1PgVDX .card-3DjzTQ:hover, 43 | .pageWrapper-1PgVDX .iconMask-3b8GzQ:hover, 44 | .pageWrapper-1PgVDX .iconMask-3b8GzQ:hover .iconMask-3b8GzQ { 45 | background-color: var(--nox-level2); 46 | } 47 | 48 | .pageWrapper-1PgVDX .card-3DjzTQ:hover .splash-3N0nhD { 49 | transform: scale(1.01) translateZ(0); 50 | } 51 | 52 | .pageWrapper-1PgVDX .card-3DjzTQ:hover { 53 | transform: translateY(-1px); 54 | } 55 | 56 | .pageWrapper-1PgVDX .card-3DjzTQ:focus .splash-3N0nhD { 57 | transform: scale(0.99) translateZ(0); 58 | } 59 | 60 | .pageWrapper-1PgVDX .card-3DjzTQ:focus { 61 | transform: translateY(1px); 62 | } -------------------------------------------------------------------------------- /legacy/sections/lfg.scss: -------------------------------------------------------------------------------- 1 | // /* LFG */ 2 | // .base-3dtUhz .lfg-3xoFkI { 3 | // background: var(--nox-level1); 4 | // } 5 | 6 | // .lfg-3xoFkI .header-3lpf0u { 7 | // background: var(--nox-level2); 8 | // } 9 | 10 | // .theme-dark .headerText-1r7YO4 strong { 11 | // color: var(--nox-accent); 12 | // } 13 | 14 | // .lfg-3xoFkI .tabBar-PTjkZh { 15 | // border: none; 16 | // } 17 | 18 | // .lfg-3xoFkI .top-28JiJ- .itemSelected-1qLhcL { 19 | // border: none; 20 | // } 21 | 22 | // .lfg-3xoFkI .pill-1nbD-Z { 23 | // background: var(--nox-accent); 24 | // } 25 | 26 | // .wrapper-33pNYY { 27 | // align-items: center; 28 | // } 29 | 30 | // .lfg-3xoFkI .card-FDVird:before { 31 | // background-color: #2b2b2b; 32 | // } 33 | 34 | // .lfg-3xoFkI .wrapperDefault-NeXRmD { 35 | // background: #212121; 36 | // } 37 | 38 | // .lfg-3xoFkI .max-mvI_jT { 39 | // background: #2b2b2b; 40 | // } 41 | 42 | // .lfg-3xoFkI .max-mvI_jT::before { 43 | // background-color: #212121; 44 | // border-bottom-color: #2b2b2b; 45 | // } 46 | 47 | // .lfg-3xoFkI .wrapperFull-2_7g2- { 48 | // background: var(--nox-level3); 49 | // opacity: 0.5; 50 | // } 51 | 52 | // .lfg-3xoFkI .buttonGreyFilledDefault-3uZpOq { 53 | // background: #4f545c; 54 | // } 55 | 56 | // .lfg-3xoFkI .buttonGreyFilledDisabled-Fjw1_v { 57 | // opacity: 0.3; 58 | // } 59 | // /* /LFG */ -------------------------------------------------------------------------------- /legacy/sections/library.scss: -------------------------------------------------------------------------------- 1 | #app-mount .gameLibrary-TTDw4Y, 2 | #app-mount .root-26DmKJ, 3 | #app-mount .root-1BQpZw { 4 | background: var(--nox-level1); 5 | } 6 | 7 | .gameLibrary-TTDw4Y .scroller-1IIF0A { 8 | background: none; 9 | } 10 | 11 | .table-1tDS6w .header-39GIC8 { 12 | background-color: var(--nox-level3) !important; 13 | } 14 | 15 | .table-1tDS6w .rowWrapperActive-2L7i9f { 16 | background-color: #333 17 | } 18 | 19 | .libraryHeader-3g95kE .topPill-30KHOu .item-3XjbnG { 20 | color: var(--nox-white2); 21 | transition: color 100ms ease, border-bottom 100ms ease; 22 | height: 47px; 23 | line-height: 47px; 24 | box-sizing: border-box; 25 | border-radius: 0; 26 | background: none!important; 27 | border-bottom: 2px solid transparent; 28 | } 29 | 30 | .libraryHeader-3g95kE .topPill-30KHOu .item-3XjbnG:hover { 31 | background: none; 32 | color: var(--nox-white4); 33 | border-bottom: 2px solid var(--nox-white4); 34 | } 35 | 36 | .libraryHeader-3g95kE .topPill-30KHOu .itemSelected-1qLhcL, 37 | .libraryHeader-3g95kE .topPill-30KHOu .itemSelected-1qLhcL:hover { 38 | background: none; 39 | color: var(--nox-white); 40 | border-bottom: 2px solid var(--nox-white); 41 | } 42 | 43 | -------------------------------------------------------------------------------- /legacy/sections/searchresults.scss: -------------------------------------------------------------------------------- 1 | /*SEARCH*/ 2 | 3 | .searchResultsWrap-3-pOjs, 4 | .searchResultsWrap-3-pOjs .searchHeader-2XoQg7 { 5 | background: var(--nox-level2)!important; 6 | box-shadow: none; 7 | } 8 | 9 | .theme-dark .searchResultsWrap-3-pOjs .searchResult-9tQ1uo::before { 10 | background-image: linear-gradient(0deg, transparent 0, var(--nox-level2) 100%); 11 | } 12 | 13 | .theme-dark .searchResultsWrap-3-pOjs .searchResult-9tQ1uo::after { 14 | background-image: linear-gradient(180deg, transparent 0, var(--nox-level2) 100%); 15 | } 16 | 17 | .theme-dark .searchResultsWrap-3-pOjs .searchResult-9tQ1uo { 18 | box-shadow: 0 0 10px 6px var(--nox-level2); 19 | } 20 | 21 | .theme-dark .searchResultsWrap-3-pOjs .searchResult-9tQ1uo { 22 | border: none; 23 | } 24 | 25 | .searchResultsWrap-3-pOjs .searchResult-9tQ1uo { 26 | border-radius: 3px; 27 | background: transparent; 28 | border: none!important; 29 | } 30 | 31 | .theme-dark .searchResultsWrap-3-pOjs .searchResult-9tQ1uo { 32 | background: var(--nox-level1) 33 | } 34 | 35 | .searchResultsWrap-3-pOjs .searchResult-9tQ1uo .container-1YxwTf { 36 | margin-bottom: 10px!important; 37 | } 38 | 39 | .theme-dark .searchResultsWrap-3-pOjs .searchResultGroup-1DphGG .channelName-1JRO3C { 40 | background: transparent; 41 | } 42 | 43 | .searchResultsWrap-3-pOjs .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar { 44 | background: rgba(225, 225, 225, 0.04); 45 | width: 8px!important; 46 | } 47 | 48 | .theme-dark .searchResultsWrap-3-pOjs .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-thumb { 49 | background: rgba(225, 225, 225, 0.2) !important; 50 | display: initial; 51 | border-radius: 0!important; 52 | border: 0px!important; 53 | background-clip: none; 54 | } 55 | 56 | .theme-dark .searchResultsWrap-3-pOjs .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-thumb:active { 57 | border: none !important; 58 | background: rgba(225, 225, 225, 0.4) !important; 59 | display: initial; 60 | border-radius: 0!important; 61 | } 62 | 63 | .searchResultsWrap-3-pOjs .scrollerWrap-2lJEkd .scroller-2FKFPG::-webkit-scrollbar-track-piece { 64 | display: none; 65 | } 66 | 67 | // .searchResultsWrap-3-pOjs .buttonsContainer-7PA8hy { 68 | // transform: translate(-5px, 15px); 69 | // } 70 | 71 | 72 | /*/SEARCH*/ 73 | 74 | 75 | .searchResultsWrap-3-pOjs .searchResult-9tQ1uo { 76 | margin-left: 10px; 77 | } 78 | .theme-dark .searchResultsWrap-3-pOjs .searchResultGroup-1DphGG .channelName-1JRO3C { 79 | margin-left: 10px; 80 | } 81 | 82 | .searchResults-2J8dju .searchResultGroup-1DphGG::before { 83 | display: none; 84 | } 85 | 86 | .buttonsContainer-7PA8hy .button-11zvza { 87 | background: var(--nox-level2); 88 | } 89 | 90 | .searchHeader-2XoQg7 .tab-2j5AEF.selected-2LAck8 { 91 | background: var(--nox-black4); 92 | } 93 | 94 | .message-1Ng5AR .avatar-1BDn8e { 95 | left: -60px; 96 | } 97 | 98 | .searchResultsWrap-3-pOjs .embedSpotify-tvxDCr { 99 | width: 100% !important; 100 | } 101 | 102 | .searchResultsWrap-3-pOjs .container-1ov-mD .embed-IeVjo6 { 103 | max-width: 265px; 104 | } 105 | -------------------------------------------------------------------------------- /legacy/settings/accessibility.scss: -------------------------------------------------------------------------------- 1 | .previewMessage-1ZN7YG { 2 | background: var(--nox-level1); 3 | } 4 | .previewMessage-1ZN7YG .message-2qnXI6 .avatar-1BDn8e { 5 | top: 0; 6 | } 7 | 8 | .theme-dark .checkbox-1ix_J3 { 9 | border-color: var(--nox-level1); 10 | } 11 | .theme-dark .checkbox-1ix_J3.checked-3_4uQ9 { 12 | background-color: var(--nox-accent) !important; 13 | border: none; 14 | } -------------------------------------------------------------------------------- /legacy/settings/account.scss: -------------------------------------------------------------------------------- 1 | /*smaller*/ 2 | .avatarUploader-3XDtmn .avatarUploaderInner-3UNxY3::after { 3 | content: ""; 4 | display: block; 5 | visibility: hidden; 6 | position: absolute; 7 | width: 100%; 8 | height: 0; 9 | padding-top: 100%; 10 | transform: scale(1.3); 11 | transition: all 300ms ease, visibility 0ms 300ms; 12 | border-radius: 50%; 13 | opacity: 0; 14 | background: var(--nox-white); 15 | pointer-events: none; 16 | animation-fill-mode: forwards; 17 | } 18 | 19 | .avatarUploader-3XDtmn .avatarUploaderInner-3UNxY3:active::after { 20 | visibility: visible; 21 | transition: all 300ms ease, visibility 0ms; 22 | animation: scale 100ms cubic-bezier(0.2, 0, 0, 1),opacity 50ms ease; 23 | opacity: 0.1; 24 | } 25 | 26 | /*/ripples*/ 27 | 28 | 29 | .theme-dark .card-FDVird::before { 30 | background: var(--nox-level1); 31 | } 32 | 33 | .userSettingsAccount-2eMFVR .input-cIJ7To { 34 | border: 0; 35 | background: none; 36 | } 37 | 38 | .avatarUploader-3XDtmn .avatarUploaderInner-3UNxY3:hover { 39 | box-shadow: inset 0 0 120px rgba(0, 0, 0, 0); 40 | } 41 | 42 | .avatarUploader-3XDtmn .avatarUploaderInner-3UNxY3 .avatarUploaderHint-3SN212 { 43 | transition: all 200ms ease; 44 | border-radius: 1000px; 45 | background: rgba(0, 0, 0, 0); 46 | color: transparent; 47 | } 48 | 49 | .avatarUploader-3XDtmn .avatarUploaderInner-3UNxY3:hover .avatarUploaderHint-3SN212 { 50 | background: rgba(0, 0, 0, 0.5); 51 | color: var(--nox-white); 52 | } 53 | 54 | .avatarUploaderInner-3UNxY3 { 55 | background-color: var(--nox-accent); 56 | } 57 | 58 | .userSettingsAccount-2eMFVR .questionMark-CWEQZn, 59 | .userSettingsAccount-2eMFVR .questionMark-CWEQZn:hover { 60 | background: var(--nox-accent); 61 | } 62 | 63 | .theme-dark .avatarUploader-3XDtmn .removeButton-1hcZyG { 64 | color: var(--nox-white6); 65 | } 66 | 67 | .theme-dark .avatarUploader-3XDtmn .removeButton-1hcZyG:hover { 68 | color: var(--nox-accent); 69 | } 70 | 71 | .accountProfileCard-1XCH88 { 72 | background: #292929; 73 | } 74 | .background-1QDuV2, 75 | .fieldList-21DyL8 { 76 | background: var(--nox-level1); 77 | } -------------------------------------------------------------------------------- /legacy/settings/auditlog.scss: -------------------------------------------------------------------------------- 1 | .theme-dark .timestamp-1mruiI, 2 | .theme-dark .auditLog-3jNbM6{ 3 | color:var(--nox-white4); 4 | } 5 | .changeDetails-bk98pu { 6 | animation:audit 100ms cubic-bezier(0,0,0,1); 7 | padding-bottom:15px; 8 | } 9 | 10 | @keyframes audit{ 11 | 0%{ 12 | padding-bottom:0; 13 | } 14 | } 15 | 16 | .header-GwIGlr { 17 | background:var(--nox-level1)!important; 18 | border-color:var(--nox-level1)!important; 19 | border-radius:3px; 20 | box-shadow:0 5px 10px rgba(0,0,0,.2); 21 | transition:300ms ease; 22 | } 23 | .header-GwIGlr.headerExpanded-CUEwZ5 { 24 | background:#353535!important; 25 | } -------------------------------------------------------------------------------- /legacy/settings/datepicker.scss: -------------------------------------------------------------------------------- 1 | .react-datepicker { 2 | background: var(--nox-level2)!important 3 | } 4 | 5 | .react-datepicker .react-datepicker__header { 6 | background-color: transparent!important 7 | } 8 | 9 | .react-datepicker .react-datepicker__day--disabled, 10 | .react-datepicker .react-datepicker__day--outside-month { 11 | border: none!important; 12 | background-color: var(--nox-level1)!important; 13 | color: var(--nox-white)!important; 14 | opacity: 0.7!important 15 | } 16 | 17 | .react-datepicker .react-datepicker__day--disabled:hover, 18 | .react-datepicker .react-datepicker__day--outside-month:hover { 19 | border: none!important; 20 | background-color: var(--nox-level1)!important; 21 | color: var(--nox-white)!important; 22 | opacity: 1!important 23 | } 24 | 25 | .react-datepicker .react-datepicker__day { 26 | border: none!important; 27 | } 28 | 29 | .react-datepicker .react-datepicker__day { 30 | color: var(--nox-white)!important; 31 | background: var(--nox-level1)!important 32 | } 33 | 34 | .react-datepicker .react-datepicker__day:hover { 35 | color: var(--nox-white)!important; 36 | background: #353535!important 37 | } 38 | 39 | .react-datepicker .react-datepicker__day:active { 40 | background: var(--nox-accent)!important; 41 | opacity: 1!important 42 | } 43 | 44 | .react-datepicker .react-datepicker__day--disabled:active, 45 | .react-datepicker .react-datepicker__day--outside-month:active { 46 | border: none!important; 47 | background-color: var(--nox-accent)!important; 48 | color: var(--nox-white)!important 49 | } 50 | 51 | .react-datepicker .react-datepicker__day.react-datepicker__day--disabled, 52 | .react-datepicker .react-datepicker__day.react-datepicker__day--disabled:hover { 53 | opacity: 0.4!important; 54 | pointer-events: none!important 55 | } 56 | 57 | .react-datepicker .react-datepicker__day-name { 58 | color: var(--nox-white7)!important 59 | } 60 | 61 | .react-datepicker .react-datepicker__current-month { 62 | color: var(--nox-white6)!important; 63 | border: none!important 64 | } 65 | 66 | .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--next, 67 | .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--previous { 68 | border: none!important; 69 | background-color: var(--nox-level1)!important; 70 | background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIyNSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTcuMzM4IDEyLjQ4NWMtNC4xNTYgNC4xNTYtOC4zMTIgOC4zMTItMTIuNDY4IDEyLjQ2Ny0xLjQwMi0xLjQwMi0yLjgwNS0yLjgwNC00LjIwNy00LjIwNiAyLjc1Ni0yLjc1NyA1LjUxMy01LjUxNCA4LjI3LTguMjdDNi4xNzYgOS43MiAzLjQxOSA2Ljk2My42NjMgNC4yMDdMNC44NyAwYy0uMDU4LS4wNTkgMTIuNTU1IDEyLjU2MiAxMi40NjggMTIuNDg1eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)50% no-repeat!important; 71 | background-size: 50%!important 72 | } 73 | 74 | .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--next:hover, 75 | .react-datepicker .react-datepicker__navigation.react-datepicker__navigation--previous:hover { 76 | border: none!important; 77 | background-color: #383838!important; 78 | } 79 | .datePicker--XZbmJ .calendarPicker-2yf6Ci .react-datepicker__day.react-datepicker__day--selected::after { 80 | background-color:var(--nox-accent); 81 | } -------------------------------------------------------------------------------- /legacy/settings/emojis.scss: -------------------------------------------------------------------------------- 1 | .emojiAliasPlaceholder-3H_iZA::after, 2 | .emojiAliasPlaceholder-3H_iZA::before { 3 | color: #fff; 4 | } 5 | 6 | .theme-dark .emojiAliasPlaceholder-3H_iZA { 7 | color: transparent; 8 | } 9 | 10 | .theme-dark .emojiRow-zIc7ZX .emojiAliasInput-1y-NBz .emojiInput-1aLNse { 11 | opacity: 1; 12 | color: #fff; 13 | box-shadow: none !important; 14 | } 15 | .emojiRow-zIc7ZX:hover .emojiAliasInput-1y-NBz .emojiInput-1aLNse { 16 | box-shadow: 0 2px 0 rgba(255,255,255,.05),-660px 2px 0 var(--nox-accent)!important; 17 | } 18 | 19 | .emojiRow-zIc7ZX .emojiAliasInput-1y-NBz .emojiInput-1aLNse:focus { 20 | box-shadow: 0 2px 0 rgba(255,255,255,.05),0 2px 0 var(--nox-accent)!important; 21 | } 22 | 23 | .emojiRow-zIc7ZX .emojiRemove-1k6MlJ { 24 | background-color: var(--nox-level1); 25 | } -------------------------------------------------------------------------------- /legacy/settings/games.scss: -------------------------------------------------------------------------------- 1 | .contentColumn-2hrIYH .notDetected-33MY4s { 2 | background:#404040; 3 | } 4 | .contentColumn-2hrIYH .gameNameInput-385LoS:focus, 5 | .contentColumn-2hrIYH .gameNameInput-385LoS:hover{ 6 | background:transparent; 7 | } 8 | .contentColumn-2hrIYH .gameNameInput-385LoS{ 9 | border:none; 10 | box-shadow:0 2px 0 transparent,-240px 2px 0 var(--nox-accent); 11 | border-radius:0; 12 | transition:200ms ease; 13 | } 14 | .contentColumn-2hrIYH .gameNameLastPlayed-3LJo8n{ 15 | overflow: hidden; 16 | } 17 | .contentColumn-2hrIYH .gameNameInput-385LoS:hover{ 18 | border:none; 19 | box-shadow:0 2px 0 rgba(255,255,255,.05),-240px 2px 0 var(--nox-accent); 20 | border-radius:0; 21 | } 22 | .contentColumn-2hrIYH .gameNameInput-385LoS:focus{ 23 | border:none; 24 | box-shadow:0 2px 0 rgba(255,255,255,.05),0 2px 0 var(--nox-accent); 25 | transition:200ms cubic-bezier(0,0,0,1); 26 | } 27 | .contentColumn-2hrIYH .lastPlayed-3bQ7Bo, 28 | .contentColumn-2hrIYH .overlayStatusText-L2IACa{ 29 | color:var(--nox-white3); 30 | margin-top:4px; 31 | } 32 | 33 | .contentColumn-2hrIYH .game-1ipmAa { 34 | box-shadow:0 1px 0 0 rgba(255,255,255,.04); 35 | } 36 | 37 | .contentColumn-2hrIYH .notDetected-33MY4s .lastPlayed-3bQ7Bo { 38 | color:var(--nox-white5); 39 | padding-bottom:3px; 40 | } 41 | 42 | 43 | 44 | 45 | .contentColumn-2hrIYH .now-playing .gameNameInput-385LoS:focus, 46 | .contentColumn-2hrIYH .now-playing .gameNameInput-385LoS:hover{ 47 | border-color:transparent!important; 48 | background: none; 49 | } 50 | .contentColumn-2hrIYH .now-playing .gameNameInput-385LoS{ 51 | box-shadow: 0 2px 0 var(--nox-white3),-240px 2px 0 var(--nox-white); 52 | } 53 | .contentColumn-2hrIYH .now-playing .gameNameInput-385LoS:focus{ 54 | box-shadow: 0 2px 0 var(--nox-white3),0 2px 0 var(--nox-white); 55 | } 56 | .contentColumn-2hrIYH .now-playing .gameName-1RiWHm{ 57 | color:var(--nox-white); 58 | } 59 | 60 | 61 | 62 | 63 | 64 | 65 | .contentColumn-2hrIYH .gameNameInput-385LoS{ 66 | padding-left:6px; 67 | } 68 | .contentColumn-2hrIYH .default-3sgIpy, .hovered-d5PMVU{ 69 | height:16px; 70 | } 71 | 72 | .game-1ipmAa .removeGame-2JFGPn { 73 | background-color: var(--nox-level1); 74 | } 75 | 76 | .contentRegion-3HkfJJ .flowerStar-1GeTsn path { 77 | fill: var(--nox-accent) !important; 78 | } 79 | 80 | .theme-dark .overlayToggleIconOn-3UNmty .fill-1ugeBG { 81 | fill: var(--nox-white4) 82 | } -------------------------------------------------------------------------------- /legacy/settings/overlay.scss: -------------------------------------------------------------------------------- 1 | .notificationSettings-1NQKPR .wrapper-3jrx9n { 2 | border-color: var(--nox-accent); 3 | } 4 | 5 | .notificationSettings-1NQKPR .option-n0icdO.selected-mKYnfr { 6 | background-color: var(--nox-accent); 7 | } 8 | 9 | .notificationSettings-1NQKPR .option-n0icdO7 { 10 | transition: all 200ms ease; 11 | } 12 | 13 | .notificationSettings-1NQKPR .option-n0icdO:hover { 14 | background: var(--nox-accent); 15 | transform: translate(0, -1px); 16 | transition: all 100ms ease, transform 150ms cubic-bezier(0,0,0,1); 17 | filter: brightness(93%)contrast(110%); 18 | } 19 | 20 | .notificationSettings-1NQKPR .option-n0icdO:active { 21 | color: rgba(0, 0, 0, 0.7); 22 | background: rgb(220, 220, 220); 23 | transform: translate(0, 2px); 24 | transition: all 50ms ease; 25 | } -------------------------------------------------------------------------------- /legacy/settings/serverboost.scss: -------------------------------------------------------------------------------- 1 | .cardWrapper-2Min21 { 2 | background: var(--nox-level3); 3 | } 4 | 5 | .card-3AyPWq:hover { 6 | background: var(--nox-black2); 7 | } 8 | 9 | .cardWrapper-2Min21 .gemIndicatorContainer-2jdECl { 10 | background-color: var(--nox-level2); 11 | } 12 | 13 | .gemWithLabel-2aecE_, 14 | .gemIndicatorProgressCircle-3wDFa1 { 15 | color: var(--nox-accent); 16 | } 17 | 18 | .cardWrapper-2Min21 .gemWithoutLabel-7-ZvB_ { 19 | color: var(--nox-white4); 20 | } 21 | 22 | .wrapper-3nSjSv::before, 23 | .marketingLogoImage-2SzXIR { 24 | filter: grayscale(100%) brightness(90%); 25 | } 26 | 27 | .wrapper-3nSjSv { 28 | background: transparent; 29 | } 30 | 31 | .content-22JeIO .tierHeaderLocked-1a2opw { 32 | background: var(--nox-level3); 33 | } 34 | 35 | .content-22JeIO .tierBody-x9kBBp { 36 | background: var(--nox-level1); 37 | } 38 | 39 | .content-22JeIO .background-3xPPFc { 40 | color: var(--nox-level3); 41 | } 42 | 43 | .content-22JeIO .tierInProgress-3mBoXq { 44 | background: var(--nox-level1); 45 | } 46 | 47 | .content-22JeIO .tierAccomplished-2eXPdI, 48 | .content-22JeIO .tierCurrent-Lw7-4E, 49 | .content-22JeIO .tierDefault-2qaRkD { 50 | background: var(--nox-accent); 51 | } 52 | 53 | // Boosting for nitro only 54 | .guildHeader-3nh5RK{ 55 | background: var(--nox-level3); 56 | } 57 | .guildSubscriptionSlots-JPXXvN{ 58 | background-color: var(--nox-level1)!important; 59 | } 60 | .guildSubscriptionSlot-1XGRPI{ 61 | border-color: var(--background-modifier-accent)!important; 62 | } -------------------------------------------------------------------------------- /legacy/settings/sidebarview.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /legacy/settings/slider.scss: -------------------------------------------------------------------------------- 1 | // .slider { 2 | // width: 95%; 3 | // } 4 | 5 | // .slider .slider-handle { 6 | // border: 0px; 7 | // background: var(--nox-accent); 8 | // -ms-transform: scale(0.6); 9 | // transform: scale(0.6); 10 | // border-radius: 50%; 11 | // cursor: pointer; 12 | // box-shadow: none; 13 | // transition: transform 100ms ease; 14 | // } 15 | 16 | // .slider .slider-handle::after { 17 | // content: ""; 18 | // width: 50px; 19 | // height: 50px; 20 | // background: var(--nox-accent); 21 | // display: block; 22 | // opacity: 0; 23 | // border-radius: 50%; 24 | // position: absolute; 25 | // top: 51%; 26 | // left: 50%; 27 | // -ms-transform: translate(-50%, -50%)scale(0.5); 28 | // transform: translate(-50%, -50%)scale(0.5); 29 | // transition: transform 0ms linear 200ms, opacity 200ms ease; 30 | // } 31 | 32 | // .slider .slider-handle:active::after { 33 | // -ms-transform: translate(-50%, -50%)scale(1.1); 34 | // transform: translate(-50%, -50%)scale(1.1); 35 | // opacity: .2; 36 | // transition: transform 200ms cubic-bezier(.35, .01, 0, 1), opacity 100ms ease; 37 | // } 38 | 39 | // .slider .slider-handle span { 40 | // -ms-transform: scale(1.2); 41 | // transform: scale(1.2); 42 | // z-index: 100000; 43 | // background: var(--nox-accent); 44 | // color: var(--nox-white); 45 | // border-radius: 100px; 46 | // border: none; 47 | // transition: all 100ms ease; 48 | // } 49 | 50 | 51 | 52 | // .slider-handle span::before, 53 | // .slider-handle span::after { 54 | // display: none 55 | // } 56 | 57 | // .slider .slider-bar { 58 | // height: 3px; 59 | // -ms-transform: translate(0, 1px); 60 | // transform: translate(0, 1px); 61 | // border-radius: 0px; 62 | // transition: all 100ms ease; 63 | // } 64 | 65 | // .slider .slider-handle:active { 66 | // -ms-transform: scale(0.8); 67 | // transform: scale(0.8); 68 | // } 69 | 70 | // .slider-handle-track { 71 | // margin-right: -13px; 72 | // margin-left: -13px; 73 | // } 74 | 75 | 76 | 77 | 78 | .defaultValue-3gC7yw .markValue-2DwdXI { 79 | color: var(--nox-accent); 80 | } 81 | .barFill-23-gu-{ 82 | background:var(--nox-accent) !important; 83 | } 84 | .theme-dark .bar-2Qqk5Z{ 85 | background:var(--nox-white2) !important; 86 | } 87 | .slider-1PF9SW .grabber-3mFHz2, 88 | .ui-slider .slider-grabber{ 89 | height:20px; 90 | width:20px; 91 | border-radius:50%; 92 | margin-left:-10px; 93 | margin-top:-10px; 94 | background:var(--nox-accent); 95 | border:none; 96 | cursor:pointer; 97 | } 98 | .userSettingsVoice-iwdUCU .inputSensitivityToggle-2LKb8o.manual-36Evg9 .microphone-2rtdHw, 99 | .slider-1PF9SW .bar-2Qqk5Z, 100 | .ui-slider .slider-bar{ 101 | height:5px; 102 | top:18px; 103 | } 104 | .track-11EASc, 105 | .slider-handle-track{ 106 | margin-left:0; 107 | margin-right:0; 108 | } 109 | .slider-1PF9SW .bubble-3we2di, 110 | .ui-slider .slider-grabber .bubble{ 111 | left:-16px; 112 | background:#353535; 113 | } 114 | .slider-1PF9SW .bubble-3we2di::before, 115 | .theme-dark .ui-slider .slider-grabber .bubble::before{ 116 | display:none; 117 | } -------------------------------------------------------------------------------- /legacy/settings/switches.scss: -------------------------------------------------------------------------------- 1 | /*switches*/ 2 | .switchWrapper-3sSQdm, 3 | .ui-switch-wrapper{ 4 | width:35px!important; 5 | position:relative; 6 | right:10px; 7 | margin-top:0px; 8 | 9 | } 10 | 11 | .switch-3wwwcV, 12 | .ui-switch{ 13 | height:15px; 14 | top:5px; 15 | visibility: visible; 16 | overflow: visible !important; 17 | width: 35px; 18 | background: none!important; 19 | } 20 | .switch-3wwwcV::after, 21 | .ui-switch::before{ 22 | content:""; 23 | display:block; 24 | top:-4px!important; 25 | left:-4px!important; 26 | height:23px!important; 27 | width:23px!important; 28 | border-radius:50%!important; 29 | transition:300ms cubic-bezier(.4,0,0,1)!important; 30 | box-shadow:0 2px 10px rgba(0,0,0,.3),0 1px 0px var(--nox-white3) inset!important; 31 | background:var(--nox-white)!important; 32 | visibility: visible; 33 | z-index:2; 34 | margin:0; 35 | transform:translate(-1px,0); 36 | } 37 | .valueChecked-m-4IJZ.sizeDefault-2YlOZr::after, 38 | .ui-switch-checkbox:checked+.ui-switch::before{ 39 | transform:translate(21px,0) !important; 40 | } 41 | .switch-3wwwcV:hover::after, 42 | .ui-switch-checkbox:hover+.ui-switch::before{ 43 | box-shadow:0 2px 15px rgba(0,0,0,.5),0 1px 0px var(--nox-white3) inset; 44 | } 45 | .switch-3wwwcV:active::after, 46 | .ui-switch-checkbox:active+.ui-switch::before{ 47 | box-shadow:0 2px 15px rgba(0,0,0,.5),0 1px 0px var(--nox-white3) inset; 48 | } 49 | .switch-3wwwcV.valueChecked-m-4IJZ:active::after, 50 | .switch-3wwwcV:active::after, 51 | .ui-switch-checkbox:checked:active+.ui-switch::before, 52 | .ui-switch-checkbox:active+.ui-switch::before{ 53 | left:-4px; 54 | width:23px; 55 | } 56 | .switch-3wwwcV::before, 57 | .ui-switch::after{ 58 | content:""; 59 | display:block; 60 | width:100%; 61 | height:100%; 62 | background:var(--nox-white)!important; 63 | border-radius:100px; 64 | visibility: visible; 65 | opacity:.25; 66 | transition:all 150ms ease!important; 67 | } 68 | .switchEnabled-V2WDBB:active::before{ 69 | opacity:.25; 70 | } 71 | .switch-3wwwcV.valueChecked-m-4IJZ::before, 72 | .ui-switch-checkbox:checked+.ui-switch::after{ 73 | opacity:0.5; 74 | } 75 | .switch-3wwwcV.valueChecked-m-4IJZ:active::before{ 76 | opacity:0.5; 77 | } 78 | .checkbox-2tyjJg, 79 | .ui-switch-checkbox{ 80 | padding: 3px 3px 3px 4px; 81 | margin:none!important; 82 | z-index:3; 83 | } 84 | body .themeClear-1EjkE4.switch-3wwwcV{ 85 | box-shadow: none!important; 86 | } 87 | body .themeClear-1EjkE4.switch-3wwwcV::before, 88 | .ui-switch-wrapper.clear .ui-switch-checkbox+.ui-switch::after{ 89 | background:var(--nox-white)!important; 90 | opacity:0.4; 91 | } 92 | body .themeClear-1EjkE4.valueChecked-m-4IJZ.switch-3wwwcV::before, 93 | .ui-switch-wrapper.clear .ui-switch-checkbox:checked+.ui-switch::after{ 94 | opacity:0.7; 95 | background:var(--nox-white)!important; 96 | } 97 | body .themeClear-1EjkE4.valueChecked-m-4IJZ.switch-3wwwcV::after, 98 | .ui-switch-wrapper.clear .ui-switch-checkbox:checked+.ui-switch::before{ 99 | opacity:1; 100 | background:var(--nox-white)!important; 101 | } 102 | .valueChecked-m-4IJZ.switch-3wwwcV.switch-3wwwcV::after, 103 | .ui-switch-checkbox:checked+.ui-switch::before{ 104 | background:var(--nox-accent)!important; 105 | } 106 | .valueChecked-m-4IJZ.switch-3wwwcV.switch-3wwwcV::before, 107 | .ui-switch-checkbox:checked+.ui-switch::after{ 108 | background:var(--nox-accent)!important; 109 | } 110 | .switchWrapperDefault, 111 | .ui-switch-wrapper{ 112 | cursor:pointer; 113 | } 114 | 115 | /*/switches*/ 116 | 117 | 118 | -------------------------------------------------------------------------------- /legacy/settings/videopreview.scss: -------------------------------------------------------------------------------- 1 | .userSettingsVoice-iwdUCU .previewOverlay-2O7_KC img { 2 | filter: grayscale(100%)brightness(110%); 3 | } 4 | 5 | .theme-dark .userSettingsVoice-iwdUCU .previewOverlay-2O7_KC { 6 | background: #292929; 7 | border: none; 8 | box-shadow: 0 5px 10px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.03) inset; 9 | border-radius: 3px; 10 | } 11 | 12 | // .notches-1sAcEM, 13 | // .progress-1IcQ3A, 14 | // .wrapper-3Z-vWm, 15 | // .container-3PXSwK { 16 | // // border-radius: 10px; 17 | // overflow: hidden; 18 | // } 19 | 20 | // .container-3PXSwK[style*="linear-gradient"] .progress-1IcQ3A { 21 | // // border-radius: 0; 22 | // } 23 | 24 | .container-3PXSwK .progress-1IcQ3A { 25 | background: var(--nox-level1); 26 | } 27 | 28 | .container-3PXSwK .notches-1sAcEM { 29 | background: none !important; 30 | } 31 | 32 | .micTest-R7grQZ .micTestButton-3lpP11{ 33 | width:106px!important; 34 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nox", 3 | "version": "1.1.0", 4 | "description": "Dark material theme for Discord.", 5 | "main": "src/index.scss", 6 | "dependencies": { 7 | "sass": "^1.54.8" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1", 11 | "build": "gulp sass", 12 | "watch": "gulp sass-watch", 13 | "import": "gulp import" 14 | }, 15 | "author": "Lilian Tedone & Zack Rauen", 16 | "license": "MIT", 17 | "devDependencies": { 18 | "gulp": "^4.0.2", 19 | "gulp-insert": "^0.5.0", 20 | "gulp-rename": "^2.0.0", 21 | "gulp-sass": "^5.1.0", 22 | "gulp-wait": "0.0.2", 23 | "node-sass-glob-importer": "^5.3.2", 24 | "stylelint": "^14.11.0", 25 | "stylelint-config-property-sort-order-smacss": "^9.0.0", 26 | "stylelint-config-sass-guidelines": "^9.0.1", 27 | "stylelint-order": "^5.0.0" 28 | }, 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/zerebos/Nox.git" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /release/Nox.theme.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @name Nox 3 | * @author Lilian Tedone & Zerebos 4 | * @description A theme for Discord *loosely* based on Google's Material Design Guidelines. 5 | * @version 2.0.0 6 | * @invite vzKhKTV 7 | * @website https://github.com/zerebos/Nox 8 | * @source https://raw.githubusercontent.com/zerebos/Nox/master/release/Nox.theme.css 9 | */ 10 | 11 | /* 12 | * Copyright (c) 2016-2017 Lilian Tedone, 2017-2023 Zack Rauen, 2023-2024 epic1online 13 | * 14 | * Permission is hereby granted, free of charge, to any person obtaining a copy 15 | * of this software and associated documentation files (the "Software"), to deal 16 | * in the Software without restriction, including without limitation the rights 17 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 18 | * copies of the Software, and to permit persons to whom the Software is 19 | * furnished to do so, subject to the following conditions: 20 | * 21 | * The above copyright notice and this permission notice shall be included in all 22 | * copies or substantial portions of the Software. 23 | * 24 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 25 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 26 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 27 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 28 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 29 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 30 | * SOFTWARE. 31 | */ 32 | 33 | @import url(https://zerebos.github.io/Nox/release/import.css); -------------------------------------------------------------------------------- /release/README.md: -------------------------------------------------------------------------------- 1 | # Nox - [Download](https://betterdiscord.app/Download?id=3) 2 | 3 | A beautiful dark material theme for Discord. This is the rebrand and continuation of Beard's Material Design Theme which has been discontinued. 4 | 5 | For support and to report bugs, please visit the [support server](https://bit.ly/NoxServer). 6 | 7 | # Variables 8 | 9 | These variables allow you to customize the theme to your preferences. 10 | 11 | - `--nox-accent` - The accent color you want for the theme. Default: `#3F85FF` 12 | - `--nox-notification-color` - Color for the unread indicator in guilds list. Default: `#FFFFFF` 13 | - `--nox-notification-width` - Width of the circle around guilds. Default: `3px` 14 | - `--nox-important-notification` - Background color for mention/ping badges. Default: `#F04747` 15 | - ~~`--nox-channels-scrollbar` - Set this to `none` to remove the scrollbar in the channel list.~~ 16 | - ~~`--nox-settings-scrollbar` - Set this to `none` to remove the scrollbar in settings.~~ 17 | - ~~`--nox-settings-time` - Length of the animation to open settings. Default: `500ms`~~ 18 | - `--nox-level1` - One of the main grays used throughout the theme. Default: `#303030` 19 | - `--nox-level2` - One of the main grays used throughout the theme. Default: `#212121` 20 | - `--nox-level3` - One of the main grays used throughout the theme. Default: `#141414` 21 | 22 | # Addons 23 | 24 | Addons are currently non-working but may be added back eventually. 25 | ~~There are a number of addons and customizations available for the theme that can be found on the [support server](http://bit.ly/BMTserver).~~ 26 | 27 | # Previews 28 | 29 | ## Main Chat 30 | ![Main Chat](https://zerebos.github.io/Nox/resources/images/main_chat.png) 31 | 32 | ## User Popout 33 | ![User Popout](https://zerebos.github.io/Nox/resources/images/user_popout.png) ![User Popout with Nitro Theme](https://zerebos.github.io/Nox/resources/images/user_popout2.png) 34 | 35 | ## User Profile 36 | ![User Profile](https://zerebos.github.io/Nox/resources/images/user_profile.png) ![User Profile with Nitro Theme](https://zerebos.github.io/Nox/resources/images/user_profile2.png) 37 | 38 | ## Status Picker 39 | ![Status Picker](https://zerebos.github.io/Nox/resources/images/status_picker.gif) 40 | -------------------------------------------------------------------------------- /resources/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/logo.png -------------------------------------------------------------------------------- /resources/images/logo.png_original: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/logo.png_original -------------------------------------------------------------------------------- /resources/images/main_chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/main_chat.png -------------------------------------------------------------------------------- /resources/images/status_picker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/status_picker.gif -------------------------------------------------------------------------------- /resources/images/user_popout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/user_popout.png -------------------------------------------------------------------------------- /resources/images/user_popout2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/user_popout2.png -------------------------------------------------------------------------------- /resources/images/user_profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/user_profile.png -------------------------------------------------------------------------------- /resources/images/user_profile2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zerebos/Nox/5c8b31c87183ebccdbc9c39a877094c4cdbda0e9/resources/images/user_profile2.png -------------------------------------------------------------------------------- /src/elevations.scss: -------------------------------------------------------------------------------- 1 | $elevation-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); 2 | 3 | $channels-elevation: 4; 4 | $guilds-elevation: 6; -------------------------------------------------------------------------------- /src/styles/channels/accountcontainer/activity.scss: -------------------------------------------------------------------------------- 1 | .activityPanel_c48ade.activityPanel_c48ade { 2 | background: var(--nox-level3); 3 | } 4 | 5 | 6 | .gameWrapper__5dec7 .title_d1da5f { 7 | font-weight: 450; 8 | } -------------------------------------------------------------------------------- /src/styles/channels/accountcontainer/index.scss: -------------------------------------------------------------------------------- 1 | .panels_c48ade.panels_c48ade { 2 | background: var(--nox-level3); 3 | border: none; 4 | border-radius: 0; 5 | bottom: 0; 6 | left: 70px; 7 | width: calc(100% - 70px); 8 | 9 | .container__37e49 { 10 | background: none; 11 | height: 64px; 12 | } 13 | 14 | .hoverRoll__0263c { 15 | pointer-events: none; 16 | } 17 | 18 | .title_d1da5f, 19 | .subtext__339d0 { 20 | color: var(--nox-white4); 21 | } 22 | 23 | .avatarWrapper__37e49:hover { 24 | background: none; 25 | .title_d1da5f { 26 | color: var(--nox-white7); 27 | } 28 | } 29 | 30 | .avatarWrapper__37e49:after { 31 | content: ""; 32 | display: block; 33 | position: absolute; 34 | width: 120px; 35 | height: 40px; 36 | background: var(--nox-white); 37 | border-radius: 32px; 38 | opacity: 0; 39 | transition: 300ms ease; 40 | pointer-events: none; 41 | } 42 | 43 | .avatarWrapper__37e49:active:after { 44 | opacity: 0.1; 45 | animation: scale 200ms cubic-bezier(0, 0, 0, 1); 46 | transition: 0ms ease; 47 | } 48 | } 49 | 50 | 51 | // Icons 52 | .container__37e49 { 53 | .button__67645 { 54 | background-repeat: no-repeat; 55 | background-position: center; 56 | } 57 | 58 | // Settings cog 59 | .button__67645[aria-label="User Settings"] { 60 | g { 61 | clip-path: none; 62 | transform: none; 63 | } 64 | path { 65 | d: path("M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"); 66 | } 67 | 68 | } 69 | 70 | // Deafen 71 | .button__67645[aria-label="Deafen"][aria-checked="false"] { 72 | top: 1px; 73 | } 74 | .button__67645[aria-label="Deafen"] { 75 | background-image: url('data:image/svg+xml,'); 76 | .contents__201d5 { 77 | display: none; 78 | } 79 | } 80 | .button__67645[aria-label="Deafen"][aria-checked="true"] { 81 | background-image: url('data:image/svg+xml,'); 82 | } 83 | 84 | // Mute 85 | .button__67645[aria-label="Mute"] { 86 | top: 1px; 87 | background-image: url('data:image/svg+xml,'); 88 | .contents__201d5 { 89 | display: none; 90 | } 91 | } 92 | .button__67645[aria-label="Mute"][aria-checked="true"] { 93 | background-image: url('data:image/svg+xml,'); 94 | } 95 | } -------------------------------------------------------------------------------- /src/styles/channels/accountcontainer/spotify.scss: -------------------------------------------------------------------------------- 1 | .listeningAlong_e0cf27 { 2 | border-top: none; 3 | background: var(--nox-level3); 4 | } -------------------------------------------------------------------------------- /src/styles/channels/accountcontainer/voiceconnection.scss: -------------------------------------------------------------------------------- 1 | .container_e131a9 { 2 | background: linear-gradient(180deg, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.1)); 3 | background-color: var(--nox-level3); 4 | border:none; 5 | } 6 | 7 | .horizontal__7c0ba .button__67645.button__67645 { 8 | opacity:.3; 9 | background-size:60%!important; 10 | background-position:50%!important; 11 | background-repeat: no-repeat; 12 | transition:all 50ms ease, background 100ms ease; 13 | background-color: transparent !important; 14 | color: var(--nox-white) !important; 15 | } 16 | 17 | .horizontal__7c0ba .button__67645:hover { 18 | opacity: .7; 19 | } 20 | .horizontal__7c0ba .button__67645:active { 21 | transition:all 0ms ease, background 100ms ease; 22 | opacity: 1; 23 | } 24 | 25 | .horizontal__7c0ba .button__67645::after { 26 | width: 100%; 27 | height: 100%; 28 | background: var(--nox-white); 29 | content: ""; 30 | display: block; 31 | border-radius: 50%; 32 | opacity: 0; 33 | position: absolute; 34 | left: 0; 35 | top: 0; 36 | transition: 300ms ease; 37 | pointer-events: none; 38 | } 39 | 40 | .horizontal__7c0ba .button__67645:active::after { 41 | opacity: 0.1; 42 | animation: scale 200ms cubic-bezier(0, 0, 0, 1); 43 | transition: 0ms ease; 44 | } 45 | 46 | .button__67645[aria-label="Disconnect"] { 47 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgOWMtMS42IDAtMy4xNS4yNS00LjYuNzJ2My4xYzAgLjM5LS4yMy43NC0uNTYuOS0uOTguNDktMS44NyAxLjEyLTIuNjYgMS44NS0uMTguMTgtLjQzLjI4LS43LjI4LS4yOCAwLS41My0uMTEtLjcxLS4yOUwuMjkgMTMuMDhjLS4xOC0uMTctLjI5LS40Mi0uMjktLjcgMC0uMjguMTEtLjUzLjI5LS43MUMzLjM0IDguNzggNy40NiA3IDEyIDdzOC42NiAxLjc4IDExLjcxIDQuNjdjLjE4LjE4LjI5LjQzLjI5LjcxIDAgLjI4LS4xMS41My0uMjkuNzFsLTIuNDggMi40OGMtLjE4LjE4LS40My4yOS0uNzEuMjktLjI3IDAtLjUyLS4xMS0uNy0uMjgtLjc5LS43NC0xLjY5LTEuMzYtMi42Ny0xLjg1LS4zMy0uMTYtLjU2LS41LS41Ni0uOXYtMy4xQzE1LjE1IDkuMjUgMTMuNiA5IDEyIDl6Ii8+PC9zdmc+); 48 | } 49 | 50 | .button__67645[aria-label="Disconnect"] .contents__201d5 { 51 | display: none; 52 | } 53 | 54 | .statusWithPopout_adcaac:hover { 55 | text-decoration: none; 56 | filter: brightness(1.3); 57 | } 58 | .rtcConnectionStatusConnected_c0cb95, 59 | .rtcConnectionQualityFine_c0cb95 .pingForeground_c0cb95 { 60 | color: var(--nox-accent); 61 | } 62 | 63 | .channel_e131a9 { 64 | color: var(--nox-white6); 65 | } 66 | .channel_e131a9:hover { 67 | text-decoration: none; 68 | color: var(--nox-white8); 69 | } 70 | 71 | 72 | //rtc popout 73 | .graphContainer_cc9e14 { 74 | background: var(--nox-level2); 75 | } 76 | .popoutText_aa3bfa { 77 | color: var(--nox-white6); 78 | } 79 | .popoutText_aa3bfa.popoutTextDetails_bcf54c { 80 | color: var(--nox-white4); 81 | } 82 | 83 | @keyframes scale { 84 | from { 85 | transform: scale(0); 86 | } 87 | } -------------------------------------------------------------------------------- /src/styles/channels/header.scss: -------------------------------------------------------------------------------- 1 | .header_f37cb1.header_f37cb1 { 2 | background: var(--nox-level3); 3 | border: none; 4 | } -------------------------------------------------------------------------------- /src/styles/channels/index.scss: -------------------------------------------------------------------------------- 1 | // Remove rounded corner at top left of channel list and allow shadow 2 | .platform-win .sidebarList_c48ade { 3 | z-index: $channels-elevation; 4 | overflow: visible; 5 | border-radius: 0; 6 | border: none; 7 | box-shadow: $elevation-shadow; 8 | } 9 | 10 | // Main channel list container 11 | .sidebar_c48ade .container__2637a { 12 | background: var(--nox-level2); 13 | } 14 | 15 | // Scroller 16 | .sidebar_c48ade .scroller__629e4 { 17 | margin-bottom: 0; 18 | } 19 | 20 | .sidebar_c48ade .scroller__629e4::-webkit-scrollbar { 21 | width: 8px !important; 22 | border-radius: 0 !important; 23 | background: var(--nox-level2) !important; 24 | } 25 | 26 | .sidebar_c48ade .scroller__629e4::-webkit-scrollbar-thumb { 27 | visibility: visible !important; 28 | border: 0 solid transparent !important; 29 | border-left: 4px solid var(--nox-level2) !important; 30 | border-radius: 0 !important; 31 | background: rgba(255, 255, 255, 0.05) !important; 32 | } 33 | 34 | .sidebar_c48ade .scroller__629e4::-webkit-scrollbar-thumb:hover { 35 | background: var(--nox-white1) !important; 36 | } 37 | 38 | .sidebar_c48ade .scroller__629e4::-webkit-scrollbar-thumb:active { 39 | background: var(--nox-white2) !important; 40 | } 41 | 42 | .sidebar_c48ade .scroller__629e4::-webkit-scrollbar-track { 43 | background: transparent !important; 44 | } 45 | 46 | .sidebar_c48ade .scroller__629e4::-webkit-scrollbar-thumb { 47 | display: var(--nox-channels-scrollbar); 48 | } 49 | 50 | .wrapper__2ea32:hover .link__2ea32 { 51 | background: rgba(255, 255, 255, 0.05); 52 | } 53 | 54 | .modeSelected__2ea32 .link__2ea32, 55 | .modeSelected__2ea32:hover .link__2ea32 { 56 | background: var(--nox-level3); 57 | } 58 | 59 | // name and icon color 60 | .name__29444, 61 | .name__2ea32, 62 | .icon__2ea32 { 63 | color: var(--nox-white4); 64 | } 65 | 66 | // hover name and icon color 67 | .wrapper__29444.muted__29444:hover .icon__29444, 68 | .wrapper__29444.muted__29444:hover .name__29444, 69 | .wrapper__29444:hover .icon__29444, 70 | .wrapper__29444:hover .name__29444, 71 | .wrapper__2ea32:hover .overflow__82b15.name__2ea32, 72 | .wrapper__2ea32:hover svg.icon__2ea32, 73 | .wrapper__2ea32:hover .actionIcon_c69b6d { 74 | color: var(--nox-white6); 75 | } 76 | 77 | // selected/unread name and icon color 78 | .wrapper__2ea32.modeSelected__2ea32 .name__2ea32, 79 | .wrapper__2ea32.modeSelected__2ea32 .icon__2ea32, 80 | .wrapper__2ea32.modeSelected__2ea32 .actionIcon_c69b6d, 81 | .modeUnreadImportant__2ea32 .name__2ea32, 82 | .modeUnreadImportant__2ea32:hover .name__2ea32, 83 | .modeUnreadImportant__2ea32 .icon__2ea32, 84 | .modeUnreadImportant__2ea32:hover .icon__2ea32 { 85 | color: var(--nox-white9); 86 | } 87 | 88 | // muted name and icon color 89 | .wrapper__2ea32.modeMuted__2ea32 .name__2ea32, 90 | .wrapper__2ea32.modeMuted__2ea32 .icon__2ea32, 91 | .wrapper__29444.muted__29444 .name__29444, 92 | .wrapper__29444.muted__29444 .icon__29444 { 93 | color: var(--nox-white1); 94 | } 95 | 96 | // userlimit 97 | .wrapper__260e1 { 98 | color: var(--nox-white4); 99 | } 100 | .users__260e1 { 101 | background-color: var(--nox-level1); 102 | } 103 | .total__260e1 { 104 | background-color: var(--nox-level3); 105 | } 106 | .total__260e1:after { 107 | border-right-color: var(--nox-level3); 108 | } 109 | 110 | // Private channels 111 | .theme-dark .scroller__99e7c { 112 | background: var(--nox-level2); 113 | margin-bottom: calc(var(--custom-app-panels-height, 0)); 114 | } 115 | 116 | .interactive_bf202d:hover { 117 | background: rgba(255, 255, 255, 0.05); 118 | color: var(--nox-white6); 119 | } 120 | 121 | .interactiveSelected__972a0, 122 | .interactive_bf202d:hover.interactiveSelected__972a0, 123 | .interactive_bf202d:focus-within.interactiveSelected__972a0 { 124 | color: var(--nox-white9); 125 | background: var(--nox-level3); 126 | } 127 | 128 | .interactive__972a0, 129 | .privateChannelsHeaderContainer__99e7c, 130 | .clickable__9293f .icon__9293f { 131 | color: var(--nox-white4); 132 | } 133 | .privateChannelsHeaderContainer__99e7c:hover, 134 | .clickable__9293f:hover .icon__9293f { 135 | color: var(--nox-white6); 136 | } -------------------------------------------------------------------------------- /src/styles/chat/dividers.scss: -------------------------------------------------------------------------------- 1 | .divider__5126c.hasContent__5126c:not(.isUnread__908e2) { 2 | border-color: transparent; 3 | } 4 | 5 | .divider__5126c.hasContent__5126c .content__908e2 { 6 | background: rgba(0, 0, 0, 0.1); 7 | color: var(--nox-white3); 8 | padding: 3px 10px; 9 | border-radius: 3px; 10 | } 11 | 12 | #---new-messages-bar.hasContent__5126c .content__908e2 { 13 | background: #2b2b2b; 14 | } 15 | 16 | #---new-messages-bar { 17 | border-top: 1px solid #f04747; 18 | } 19 | 20 | #---new-messages-bar:not(.hasContent__5126c):not(.beforeGroup__5126c) { 21 | margin-top: -3px; 22 | margin-bottom: 2px; 23 | } -------------------------------------------------------------------------------- /src/styles/chat/embeds.scss: -------------------------------------------------------------------------------- 1 | // invite embed 2 | .wrapper_d5f3cd { 3 | background-color: var(--nox-level2); 4 | border-radius: 3px; 5 | } 6 | .wrapper_d5f3cd .flowerStar__3e3b0 path { 7 | fill: var(--nox-accent); 8 | } 9 | .guildIconExpired_d5f3cd { 10 | filter: grayscale(1); 11 | background-color: rgba(255, 255, 255, .05); 12 | border-radius: 50%; 13 | } 14 | 15 | // bot embed 16 | .embedFull__623de { 17 | border-color: var(--nox-white1); 18 | background: var(--nox-level2); 19 | border-radius: 3px; 20 | box-shadow: 0 2px 5px rgba(0, 0, 0, .1); 21 | } 22 | 23 | .botTagRegular__82f07 { 24 | background: var(--nox-accent); 25 | } 26 | 27 | // file embed 28 | .fileWrapper__0ccae.fileWrapper__0ccae { 29 | background-color: var(--nox-level2); 30 | border-color: var(--nox-level3); 31 | border-radius: 2px; 32 | } 33 | .fileWrapper__0ccae .metadata__0ccae { 34 | color: var(--nox-white2) 35 | } 36 | 37 | // textfile embed 38 | .newMosaicStyle__4d95d .textContainer__4d95d { 39 | border-radius: 3px 3px 0 0; 40 | } 41 | .newMosaicStyle__4d95d .footer__4d95d { 42 | border-radius: 0 0 3px 3px; 43 | } 44 | .textContainer__4d95d, 45 | .footer__4d95d, 46 | .codeView__4d95d { 47 | background-color: var(--nox-level2); 48 | border-color: var(--nox-level3); 49 | color: var(--nox-white6); 50 | } 51 | .toggleExpandSection__4d95d { 52 | color: var(--nox-white6); 53 | } 54 | .theme-dark .hljs-code, 55 | .theme-dark .hljs-comment, 56 | .theme-dark .hljs-formula { 57 | color: var(--nox-white4); 58 | } 59 | .toggleExpandSection__4d95d:hover { 60 | color: var(--nox-white9); 61 | } 62 | .footer__4d95d .formattedSize__4d95d { 63 | color: var(--nox-white2); 64 | } 65 | .footer__4d95d .downloadButton__4d95d, 66 | .footer__4d95d .codeIcon__4d95d { 67 | color: var(--nox-white4); 68 | } 69 | .footer__4d95d .downloadSection__4d95d:hover .downloadButton__4d95d, 70 | .footer__4d95d .codeIcon__4d95d:hover { 71 | color: var(--nox-white6); 72 | } 73 | // language selector 74 | .languageSelector__4d95d { 75 | background-color: var(--nox-level2); 76 | border-radius: 0; 77 | } 78 | .languageSelector__4d95d .container__33507 { 79 | background-color: var(--nox-level1); 80 | border-radius: 0; 81 | margin: 2px 2px 0 2px; 82 | } 83 | .languageSelector__4d95d .item__97e86 { 84 | border-radius: 3px; 85 | color: var(--nox-white4); 86 | } 87 | .focused__97e86, .item__97e86:hover:not(.disabled__97e86) { 88 | background-color: rgba(255, 255, 255, .05); 89 | color: var(--nox-white6); 90 | } 91 | .item__97e86.item__97e86.selected__97e86 { 92 | background-color: var(--nox-black3); 93 | color: var(--nox-white9); 94 | } 95 | 96 | // video embed 97 | .mediaBarProgress_f7877e, 98 | .mediaBarProgress_f7877e:after, 99 | .mediaBarProgress_f7877e:before { 100 | background-color: var(--nox-accent); 101 | } 102 | .mediaBarInteraction_f7877e:hover .mediaBarGrabber_f7877e, 103 | .mediaBarInteractionDragging_f7877e .mediaBarGrabber_f7877e { 104 | background-color: var(--nox-accent); 105 | } 106 | 107 | // audio embed 108 | .wrapperAudio_f316dd.wrapperAudio_f316dd { 109 | background-color: var(--nox-level2); 110 | border: none; 111 | border-radius: 3px; 112 | } 113 | .audioControls_f316dd { 114 | background-color: var(--nox-level3); 115 | } 116 | .audioMetadata_f316dd:before { 117 | filter: hue-rotate(-17deg); 118 | } 119 | 120 | // voice embed 121 | .messageAttachment__5dae1 .container_a8e786 { 122 | background-color: var(--nox-level3); 123 | border-radius: 4px; 124 | } 125 | .theme-dark .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786 { 126 | background: var(--nox-accent); 127 | } 128 | .theme-dark .container_a8e786:not(.playing_a8e786) .playButtonContainer_a8e786:hover { 129 | background: var(--nox-accent); 130 | filter: brightness(1.1); 131 | } 132 | .playing_a8e786 .playIcon_a8e786 { 133 | color: var(--nox-accent); 134 | } 135 | .rippleContainer_a8e786 { 136 | border-radius: 0; 137 | } 138 | .ripple_a8e786 { 139 | background-color: var(--nox-level1-5); 140 | border-radius: 0; 141 | } 142 | .playing_a8e786 .volumeButtonIcon_a8e786 { 143 | color: var(--nox-white6); 144 | } -------------------------------------------------------------------------------- /src/styles/chat/expressionpicker.scss: -------------------------------------------------------------------------------- 1 | .contentWrapper__08434 { 2 | background: var(--nox-level2); 3 | 4 | .container_fed6d3 { 5 | background-color: transparent; 6 | } 7 | 8 | .navButtonActive__08434 { 9 | background: var(--nox-white1); 10 | } 11 | 12 | .header_fed6d3, 13 | .header__8ef02, 14 | .header_c0e32c { 15 | background: var(--nox-level3); 16 | padding: 6px; 17 | } 18 | .searchBar_fed6d3, 19 | .container_a45028 { 20 | background: none; 21 | } 22 | 23 | // gifpicker favourites 24 | .categoryFadeBlurple_d02962 { 25 | background: var(--nox-accent); 26 | opacity: 0.6; 27 | } 28 | .categoryFadeBlurple_d02962:hover { 29 | background: var(--nox-accent); 30 | opacity: 0.7; 31 | } 32 | // gifpicker hover/focus 33 | .result__2dc39:hover:after, 34 | .focused_bad108:after { 35 | box-shadow: inset 0 0 0 2px var(--nox-accent), inset 0 0 0 3px #2f3136 36 | } 37 | 38 | .placeholder__2dc39 { 39 | background: var(--nox-level1); 40 | } 41 | 42 | //stickerpicker 43 | .categoryList__3ad28, 44 | .inspector_aeaaeb { 45 | background: var(--nox-level3); 46 | } 47 | 48 | .categoryList__3ad28 { 49 | margin-top: -4px; 50 | } 51 | 52 | .wrapper__14245 { 53 | background: var(--nox-level2); 54 | } 55 | 56 | // hover background 57 | .stickerInspected_c6367b .inspectedIndicator_c6367b, 58 | .guildIcon__0fa6d, 59 | .firstPartyCategorySelected__3ad28, 60 | .firstPartyCategorySelected__3ad28:hover, 61 | .stickerCategoryGenericSelected__3ad28, 62 | .stickerCategoryGenericSelected__3ad28:hover { 63 | background: var(--nox-level1); 64 | } 65 | 66 | //emojipicker 67 | .header_c0e32c, 68 | .emojiPicker_c0e32c { 69 | border-radius: 0; 70 | } 71 | 72 | .categoryList_c0e32c { 73 | background: var(--nox-level3); 74 | margin-top: -4px; 75 | } 76 | 77 | // hover background 78 | .emojiItem_fc7141.emojiItemSelected_fc7141, 79 | .categoryItemDefaultCategorySelected_b9ee0c, 80 | .categoryItemDefaultCategorySelected_b9ee0c:hover { 81 | background: var(--nox-level1); 82 | } 83 | 84 | .imageLoading__1859b { 85 | background-image: none; 86 | background-color: var(--nox-level1); 87 | border-radius: 8px; 88 | } 89 | } 90 | 91 | -------------------------------------------------------------------------------- /src/styles/chat/form.scss: -------------------------------------------------------------------------------- 1 | .form_f75fb0.form_f75fb0.form_f75fb0 { 2 | background: none; 3 | padding: 0; 4 | &:not(:has(.hasStackedBar__74017)) { 5 | box-shadow: $elevation-shadow; 6 | } 7 | } 8 | 9 | .form_f75fb0::after, 10 | .form_f75fb0::before { 11 | content: none; 12 | } 13 | 14 | .channelTextArea_f75fb0 .scrollableContainer__74017 { 15 | // max-height: 400px!important; 16 | // overflow-y: scroll!important; 17 | background: var(--nox-level1-5); 18 | padding: 10px 0 10px 0; 19 | border-radius: 0; 20 | } 21 | 22 | // fix height 23 | .buttons__74017, 24 | .attachWrapper__0923f, 25 | .attachButton__0923f.attachButton__0923f { 26 | height: 44px; 27 | min-height: 0; 28 | align-self: center; 29 | top: 0; 30 | bottom: 0; 31 | } 32 | .channelBottomBarArea_f75fb0 .textArea__74017 { 33 | min-height: 0; 34 | align-self: center; 35 | } 36 | .channelBottomBarArea_f75fb0 .slateTextArea_ec4baf.slateTextArea_ec4baf { 37 | min-height: 0; 38 | padding: 0; 39 | } 40 | .slateContainer_ec4baf { 41 | align-content: center; 42 | } 43 | 44 | // reply bar 45 | .stackedBars__74017.stackedBars__74017 { 46 | background: var(--nox-level2); 47 | border-radius: 8px 8px 0 0; 48 | } 49 | 50 | .replyBar__841c8 { 51 | background: none; 52 | z-index: 1; 53 | } 54 | 55 | .channelTextArea_f75fb0.channelTextArea_f75fb0 { 56 | background: none; 57 | border: none; 58 | margin: 0; 59 | } 60 | 61 | .placeholder__1b31f.placeholder__1b31f { 62 | color: var(--nox-white3); 63 | padding: 0; 64 | } 65 | 66 | .typing_b88801 { 67 | background: var(--nox-level2); 68 | color: var(--nox-white); 69 | bottom: 100%; 70 | padding: 0 20px; 71 | // margin-left: 15px; 72 | border-radius: 5px 5px 0 0; 73 | opacity: 0.95; 74 | transition: opacity 200ms ease 75 | } 76 | 77 | .typing_b88801:hover { 78 | opacity: 1; 79 | } 80 | 81 | .typing_b88801 .text_b88801 { 82 | line-height: 26px; 83 | } 84 | 85 | .typingDots_b88801 { 86 | margin-right: 5px; 87 | } 88 | 89 | .cooldownWrapper_b21699 { 90 | color: var(--nox-white5) !important; 91 | } 92 | 93 | // removes gap above edit box 94 | .channelTextArea__5126c { 95 | margin-top: 0; 96 | border-radius: 0; 97 | } 98 | 99 | // edit box bg 100 | .channelTextArea__5126c .themedBackground__74017 { 101 | background: var(--nox-level1-5); 102 | border-radius: 3px; 103 | } 104 | 105 | .button_aa63ab[disabled]>.innerButton_aa63ab>.buttonChild_aa63ab, 106 | .buttonChild_aa63ab { 107 | color: var(--nox-white2); 108 | } 109 | 110 | .activeButtonChild_aa63ab { 111 | color: var(--nox-accent); 112 | } 113 | 114 | .button_aa63ab.button_aa63ab:focus-within .activeButtonChild_aa63ab, 115 | .button_aa63ab.button_aa63ab:focus .activeButtonChild_aa63ab, 116 | .button_aa63ab.button_aa63ab:hover .activeButtonChild_aa63ab { 117 | color: var(--nox-accent); 118 | opacity: 0.6 !important; 119 | transition: opacity ease 300ms; 120 | } 121 | 122 | .button_aa63ab.button_aa63ab:active .activeButtonChild_aa63ab { 123 | color: var(--nox-accent); 124 | opacity: 1 !important; 125 | } 126 | 127 | .codeBlockText_ada32f, 128 | .codeLine_ada32f { 129 | color: var(--nox-white5); 130 | } 131 | 132 | .codeBlockSyntax_ada32f, 133 | .syntaxAfter_ada32f, 134 | .syntaxBefore_ada32f { 135 | color: var(--nox-white6); 136 | } 137 | 138 | .codeBlockLang_ada32f { 139 | color: var(--nox-accent); 140 | } -------------------------------------------------------------------------------- /src/styles/chat/inbox.scss: -------------------------------------------------------------------------------- 1 | .expandedInboxHeader_f0cd33 { 2 | .inboxIcon_ab6641, 3 | .inboxTitle_ab6641 { 4 | color: var(--nox-white7); 5 | } 6 | } 7 | 8 | .topPill_b3f026 { 9 | .tab_ab6641.selected_b3f026.selected_b3f026.selected_b3f026.selected_b3f026 { 10 | background-color: var(--nox-white1); 11 | } 12 | 13 | .tab_ab6641.tab_ab6641.tab_ab6641:hover { 14 | background-color: rgba(255, 255, 255, .05); 15 | } 16 | } 17 | 18 | .friendRequestsButton__523aa, 19 | .button__292b6.secondary__45d4f { // filter button 20 | background-color: var(--nox-white1); 21 | color: var(--nox-white6); 22 | &:hover { 23 | background-color: var(--nox-white2); 24 | } 25 | } 26 | 27 | .container__0f711 { 28 | background-color: var(--nox-level1); 29 | } 30 | 31 | .body__6fddf { 32 | .text-md-normal__6e567, 33 | .text-xs-medium_d3e0f1 { 34 | color: var(--nox-white6) !important; 35 | } 36 | } 37 | 38 | .recentMentionsPopout__95796 { 39 | .channelHeader__35a7e { 40 | background: var(--nox-level2); 41 | box-shadow: -2px 2px 4px rgba(0,0,0,.4); 42 | } 43 | 44 | .messageContainer__95796 { 45 | background: var(--nox-level1); 46 | border: none; 47 | border-radius: 3px; 48 | margin-right: 2px; 49 | } 50 | 51 | .message__95796 { 52 | background: rgba(0 0 0 / 10%); 53 | margin: 12px 16px 12px 72px; 54 | padding: 0 7px 2px 10px; 55 | overflow: visible; 56 | 57 | &::before { 58 | box-sizing: border-box; 59 | content: ""; 60 | width: 0; 61 | height: 0; 62 | left: -20px; 63 | display: block; 64 | position: relative; 65 | border-style: solid; 66 | border-width: 0 10px 10px 0; 67 | border-color: rgba(0,0,0,0) rgba(0,0,0,.1) rgba(0,0,0,0) rgba(0,0,0,0); 68 | } 69 | 70 | .avatar_c19a55 { 71 | left: -60px; 72 | top: 0; 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /src/styles/chat/index.scss: -------------------------------------------------------------------------------- 1 | .chat_f75fb0 .messagesWrapper__36d07 { 2 | background: var(--nox-level1); 3 | margin-bottom: 4px; 4 | } 5 | 6 | // message loading placeholder 7 | .wrapper_d852db { 8 | background: none; 9 | } 10 | 11 | .wrapper_fc8177 { 12 | background: rgba(0, 0, 0, 0.1); 13 | padding: 0 7px .25rem 10px !important; 14 | margin: 0 40px 0 80px; 15 | position: static; 16 | } 17 | 18 | .wrapper_fc8177 .contents_fc8177 { 19 | position: relative; 20 | } 21 | 22 | .wrapper_fc8177 .avatar_fc8177 { 23 | left: -70px; 24 | top: -10px; 25 | margin: 0; 26 | } 27 | 28 | .wrapper_fc8177:has(.avatar_fc8177)::before { 29 | content: ""; 30 | width: 0; 31 | height: 0; 32 | left: -20px; 33 | top: 0; 34 | display: block; 35 | position: relative; 36 | border-style: solid; 37 | border-width: 0 10px 10px 0; 38 | border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent; 39 | } 40 | 41 | // codeblocks 42 | .markup__75297 code { 43 | background: var(--nox-level2); 44 | border-color: var(--nox-level3); 45 | border-radius: 2px; 46 | } 47 | 48 | // timestamp 49 | .timestamp__75297 { 50 | background-color: rgba(255, 255, 255, .1); 51 | } 52 | 53 | // inline code 54 | .markup__75297 code.inline { 55 | border-radius: 2px; 56 | } 57 | .after_inlineCode_ada32f, 58 | .before_inlineCode_ada32f, 59 | .inlineCode_ada32f{ 60 | background: var(--nox-level2); 61 | } 62 | 63 | .blockquoteDivider__75297 { 64 | background-color: var(--nox-black3); 65 | } -------------------------------------------------------------------------------- /src/styles/chat/messagebars.scss: -------------------------------------------------------------------------------- 1 | .jumpToPresentBar__0f481 { 2 | background-color: var(--nox-accent); 3 | border-radius: 16px; 4 | // width: auto; 5 | right: 20px; 6 | left: auto; 7 | bottom: 30px; 8 | padding-bottom: 2px; 9 | box-shadow: $elevation-shadow; 10 | 11 | .barButtonMain__0f481 { 12 | display: none; 13 | } 14 | 15 | .barButtonAlt__0f481 { 16 | text-align: center; 17 | padding: 0 1px 0 10px; 18 | } 19 | 20 | .barButtonIcon__0f481 { 21 | margin-left: 0; 22 | width: 26px; 23 | height: 26px; 24 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxwYXRoIGQ9Ik0wIDEyVjBoMTJ2MTIiLz4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik01LjI0ODI5MTAyIDJ2NS4yMTg2ODg5NkwzIDUgMiA2bDQgNCA0LTQtMS0xLTIuMjg0MTE4NjUgMi4yMTg2ODg5NlYyIi8+CiAgPC9nPgo8L3N2Zz4=); 25 | background-position: 40% 70%; 26 | background-size: 60%; 27 | background-repeat: no-repeat; 28 | } 29 | 30 | .spinner__0b5bb { 31 | padding: 0; 32 | width: 26px; 33 | height: 26px; 34 | background-position: 50%; 35 | background-size:45%; 36 | background-repeat: no-repeat; 37 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjI1IDI1IDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9ImNpcmN1bGFyIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5sb2FkZXIgeyAgcG9zaXRpb246IHJlbGF0aXZlOyAgbWFyZ2luOiAwIGF1dG87ICB3aWR0aDogMTAwcHg7fS5sb2FkZXI6YmVmb3JlIHsgIGNvbnRlbnQ6ICcnOyAgZGlzcGxheTogYmxvY2s7ICBwYWRkaW5nLXRvcDogMTAwJTt9LmNpcmN1bGFyIHsgIC13ZWJraXQtYW5pbWF0aW9uOiByb3RhdGUgMnMgbGluZWFyIGluZmluaXRlOyAgICAgICAgICBhbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7ICBoZWlnaHQ6IDEwMCU7ICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7ICAgICAgICAgIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7ICB3aWR0aDogMTAwJTsgIHBvc2l0aW9uOiBhYnNvbHV0ZTsgIHRvcDogMDsgIGJvdHRvbTogMDsgIGxlZnQ6IDA7ICByaWdodDogMDsgIG1hcmdpbjogYXV0bzsgIHN0cm9rZTogI2ZmZjt9LnBhdGggeyAgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7ICAtd2Via2l0LWFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgICAgICAgICAgYW5pbWF0aW9uOiBkYXNoIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGUsIGNvbG9yIDZzIGVhc2UtaW4tb3V0IGluZmluaXRlOyAgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7fUAtd2Via2l0LWtleWZyYW1lcyByb3RhdGUgeyAgMTAwJSB7ICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgfX1Aa2V5ZnJhbWVzIHJvdGF0ZSB7ICAxMDAlIHsgICAgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7ICB9fUAtd2Via2l0LWtleWZyYW1lcyBkYXNoIHsgIDAlIHsgICAgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyAgICBzdHJva2UtZGFzaG9mZnNldDogMDsgIH0gIDUwJSB7ICAgIHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7ICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAtMzVweDsgIH0gIDEwMCUgeyAgICBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyAgICBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyAgfX1Aa2V5ZnJhbWVzIGRhc2ggeyAgMCUgeyAgICBzdHJva2UtZGFzaGFycmF5OiAxLCAyMDA7ICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwOyAgfSAgNTAlIHsgICAgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyAgfSAgMTAwJSB7ICAgIHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7ICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7ICB9fSAgPC9zdHlsZT48Y2lyY2xlIGNsYXNzPSJwYXRoIiAgY3g9IjUwIiBjeT0iNTAiIHI9IjIwIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjwvc3ZnPg==); 38 | 39 | .inner__0b5bb { 40 | display: none; 41 | } 42 | } 43 | 44 | .barButtonIcon__0f481 path { 45 | display: none; 46 | } 47 | } 48 | 49 | .newMessagesBar__0f481 { 50 | background-color: var(--nox-accent); 51 | } -------------------------------------------------------------------------------- /src/styles/chat/messagegroup.scss: -------------------------------------------------------------------------------- 1 | .message__5126c.cozy_c19a55 { 2 | background: rgba(0, 0, 0, 0.1); 3 | padding: 0 7px .25rem 10px !important; 4 | margin: 0 40px 0 80px; 5 | // overflow: visible; 6 | } 7 | 8 | .message__5126c.groupStart__5126c { 9 | margin-top: 20px; 10 | } 11 | 12 | .message__5126c .contents_c19a55 { 13 | position: relative; 14 | } 15 | 16 | .groupStart__5126c::before { 17 | content: ""; 18 | width: 0; 19 | height: 0; 20 | left: -20px; 21 | top: 0; 22 | display: block; 23 | position: relative; 24 | border-style: solid; 25 | border-width: 0 10px 10px 0; 26 | border-color: transparent rgba(0, 0, 0, 0.1) transparent transparent; 27 | } 28 | 29 | .message__5126c .avatar_c19a55 { 30 | left: -70px; 31 | top: -10px; 32 | margin: 0; 33 | } 34 | 35 | .repliedMessageClickableSpine_c19a55 { 36 | display: none; 37 | } 38 | 39 | .replying__5126c::before, 40 | .ephemeral__5126c::before { 41 | background: none; 42 | } 43 | 44 | .replying__5126c .messageContent_c19a55 { 45 | position: relative; 46 | padding-left: 8px; 47 | margin-left: -10px; 48 | border-left: 2px solid var(--nox-accent); 49 | } 50 | 51 | .messageListItem__5126c .hasReply_c19a55 .avatar_c19a55 { 52 | top: -30px; 53 | } 54 | 55 | .message__5126c .avatarDecoration_c19a55 { 56 | left: -74px; 57 | top: -12px; 58 | } 59 | 60 | .message__5126c.hasReply_c19a55 .avatarDecoration_c19a55 { 61 | top: -32px; 62 | } 63 | 64 | .repliedMessage_c19a55.repliedMessage_c19a55 { 65 | top: -3px; 66 | color: var(--nox-white5); 67 | } 68 | 69 | .timestamp_c19a55.timestampVisibleOnHover_c19a55.alt_c19a55 { 70 | left: -70px; 71 | } 72 | .timestamp_c19a55.timestampInline_c19a55, 73 | .timestamp_c19a55.timestampVisibleOnHover_c19a55.alt_c19a55 { 74 | color: var(--nox-white2); 75 | } 76 | 77 | .message__5126c.message__5126c.message__5126c.selected__5126c, 78 | .message__5126c.message__5126c.message__5126c.message__5126c.message__5126c:hover { 79 | background-color: rgba(2, 2, 2, 0.06); 80 | } 81 | .groupStart__5126c.selected__5126c::before, 82 | .groupStart__5126c:hover::before { 83 | border-color: rgba(0,0,0,0) rgba(2,2,2,0.06) rgba(0,0,0,0) rgba(0,0,0,0); 84 | } 85 | 86 | // mentioned 87 | .mentioned__5126c::before { 88 | background: none; 89 | } 90 | .message__5126c.mentioned__5126c .messageContent_c19a55 { 91 | position: relative; 92 | padding-left: 3px; 93 | margin-left: -4px; 94 | background: rgba(250,166,26,.1); 95 | border-left: 4px solid rgb(250,166,26); 96 | border-radius: 2px; 97 | } 98 | .message__5126c.mentioned__5126c:hover .messageContent_c19a55, 99 | .message__5126c.selected__5126c.mentioned__5126c .messageContent_c19a55 { 100 | background: rgba(250,166,26,.15); 101 | } 102 | 103 | // mentions 104 | .roleMention__75297 { 105 | border-radius: 2px; 106 | } 107 | 108 | .mention, 109 | .roleMention__75297:not([style]), 110 | .channelMention { 111 | position: relative; 112 | color: var(--nox-accent); 113 | background: none; 114 | 115 | &::after { 116 | content: ''; 117 | z-index: -1; 118 | width: 100%; 119 | height: 100%; 120 | position: absolute; 121 | left: 0; 122 | opacity: 0.15; 123 | background-color: var(--nox-accent); 124 | border-radius: 2px; 125 | } 126 | 127 | &:hover { 128 | color: var(--nox-white); 129 | background: none; 130 | 131 | &::after { 132 | opacity: 1; 133 | } 134 | } 135 | } 136 | 137 | // reactions 138 | .reaction_f8896c, // forums 139 | .reaction__23977 { 140 | background: var(--nox-white1); 141 | border-radius: 4px; 142 | border: none !important; 143 | } 144 | 145 | .reaction_f8896c:hover, // forums 146 | .reaction__23977:hover { 147 | background: var(--nox-black1); 148 | } 149 | 150 | .reaction_f8896c.reactionMe_f8896c, // forums 151 | .reaction__23977.reactionMe__23977 { 152 | background: var(--nox-accent); 153 | } 154 | 155 | .reaction_f8896c .reactionCount_f8896c, // forums 156 | .reaction__23977 .reactionCount__23977 { 157 | color: var(--nox-white); 158 | } 159 | 160 | .reaction_f8896c.reactionMe_f8896c .emoji, // forums 161 | .reaction__23977.reactionMe__23977 .emoji { 162 | filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.7)); 163 | } -------------------------------------------------------------------------------- /src/styles/chat/pins.scss: -------------------------------------------------------------------------------- 1 | .messagesPopoutWrap__45690 { 2 | background-color: var(--nox-level2); 3 | } 4 | .header__45690 { 5 | background-color: var(--nox-level2); 6 | box-shadow: none; 7 | } 8 | .footer__45690 { 9 | background-color: var(--nox-level3); 10 | } 11 | 12 | .messageGroupWrapper__45690 { 13 | background: var(--nox-level1); 14 | border: none; 15 | border-radius: 3px; 16 | margin-right: 2px; 17 | 18 | .messageGroupCozy__45690 { 19 | background: rgba(0 0 0 / 10%); 20 | margin: 12px 16px 12px 72px; 21 | padding: 0 7px 2px 10px; 22 | } 23 | 24 | .messageGroupCozy__45690::before { 25 | content: ""; 26 | width: 0; 27 | height: 0; 28 | left: -20px; 29 | display: block; 30 | position: relative; 31 | border-style: solid; 32 | border-width: 0 10px 10px 0; 33 | border-color: rgba(0,0,0,0) rgba(0,0,0,.1) rgba(0,0,0,0) rgba(0,0,0,0); 34 | } 35 | 36 | .avatar_c19a55 { 37 | left: -60px; 38 | top: 0; 39 | } 40 | .avatarDecoration_c19a55 { 41 | left: -64px; 42 | top: 0; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/styles/chat/search.scss: -------------------------------------------------------------------------------- 1 | .searchBar__97492 { 2 | background: var(--nox-level2); 3 | } 4 | 5 | .public-DraftEditorPlaceholder-root.public-DraftEditorPlaceholder-root.public-DraftEditorPlaceholder-root, 6 | .icon_fea832 { 7 | color: var(--nox-white3); 8 | } 9 | 10 | .searchBar__97492 .searchAnswer_bd8186, 11 | .searchBar__97492 .searchFilter_bd8186 { 12 | background: rgba(255 255 255 / 10%); 13 | padding-left: 0; 14 | margin-left: 0; 15 | } 16 | 17 | .searchFilter_bd8186:first-child { 18 | padding-left: 2px; 19 | margin-left: -2px; 20 | } 21 | 22 | // search options popouts (could also do other popouts) 23 | .container__55c99 { 24 | background: var(--nox-level3); 25 | box-shadow: 0px 5px 10px rgba(0 0 0 / 40%); 26 | } 27 | 28 | .searchOption__56fec { 29 | .filter__56fec { 30 | color: var(--nox-white6); 31 | } 32 | .answer__56fec { 33 | color: var(--nox-white4); 34 | font-weight: 400; 35 | } 36 | &:hover { 37 | background-color: rgba(255, 255, 255, 0.05);; 38 | .filter__56fec { 39 | color: var(--nox-white9); 40 | } 41 | .answer__56fec { 42 | color: var(--nox-white6); 43 | } 44 | } 45 | } 46 | 47 | .container__55c99 .option__56fec:after { 48 | background: none; 49 | } 50 | 51 | .container__55c99 .queryContainer__55c99 { 52 | background: var(--nox-level2); 53 | border: none; 54 | } 55 | .resultsGroup__56fec { 56 | .header__56fec, 57 | .searchLearnMore__56fec { 58 | color: var(--nox-white7); 59 | font-weight: 700; 60 | } 61 | 62 | .searchLearnMore__56fec:hover { 63 | color: var(--nox-white9); 64 | } 65 | 66 | &::before { 67 | content: none; 68 | } 69 | } 70 | 71 | // results pane 72 | .searchResultsWrap_a9e706, 73 | .searchHeader_f3b986 { 74 | background-color: var(--nox-level2); 75 | } 76 | 77 | // indexing spinner 78 | .path2__0b5bb.path2__0b5bb, 79 | .path3__0b5bb.path3__0b5bb, 80 | .path__0b5bb.path__0b5bb { 81 | stroke: var(--nox-accent); 82 | } 83 | 84 | .searchResult__02a39 { 85 | border-radius: 3px; 86 | background: var(--nox-level1); 87 | 88 | .wrapper_c19a55 { 89 | background: rgba(0 0 0 / 10%); 90 | margin: 0 16px 0 72px; 91 | padding: 0 7px 2px 10px; 92 | } 93 | 94 | .wrapper_c19a55::before { 95 | content: ""; 96 | width: 0; 97 | height: 0; 98 | left: -20px; 99 | display: block; 100 | position: relative; 101 | border-style: solid; 102 | border-width: 0 10px 10px 0; 103 | border-color: rgba(0,0,0,0) rgba(0,0,0,.1) rgba(0,0,0,0) rgba(0,0,0,0); 104 | } 105 | 106 | .avatar_c19a55 { 107 | left: -60px; 108 | top: 0; 109 | } 110 | .avatarDecoration_c19a55 { 111 | left: -64px; 112 | top: 0; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/styles/chat/threads.scss: -------------------------------------------------------------------------------- 1 | // thread icon 2 | .iconContainer__235ca { 3 | left: -85px; 4 | right: unset; 5 | } 6 | 7 | .hasThread_c19a55.hasThread_c19a55 { 8 | // line pointing to thread 9 | &::after{ 10 | content: none; 11 | } 12 | 13 | // non link thread header text 14 | .container__235ca { 15 | color: var(--nox-white4); 16 | } 17 | 18 | .anchor_edefb8 { 19 | color: var(--nox-white8); 20 | } 21 | } 22 | 23 | // thread attachement box 24 | .systemMessageContainer__9271d { 25 | background-color: var(--nox-level2); 26 | border-radius: 2px; 27 | 28 | // title 29 | .name__9271d { 30 | color: var(--nox-white8); 31 | } 32 | // message 33 | .bottomLine__9271d { 34 | color: var(--nox-white4); 35 | } 36 | // timestamp 37 | .timestamp__9271d { 38 | color: var(--nox-white3); 39 | } 40 | } 41 | 42 | // split view 43 | 44 | // remove top border 45 | .container__01ae2.container__01ae2 { 46 | border: none; 47 | } 48 | 49 | .threadSidebarOpen_f75fb0.threadSidebarOpen_f75fb0, 50 | .container__01ae2 { 51 | border-radius: 0; 52 | } 53 | .chatContent_f75fb0 { 54 | background: var(--nox-level1); 55 | } 56 | .resizeHandle__01ae2 { 57 | background: var(--nox-level3); 58 | } -------------------------------------------------------------------------------- /src/styles/chat/titlebar.scss: -------------------------------------------------------------------------------- 1 | .container__9293f.themed__9293f { 2 | background: var(--nox-level3); 3 | border: none; 4 | } 5 | 6 | // Remove stupid gradient 7 | .children__9293f::after { 8 | display: none; 9 | } 10 | 11 | // channel description 12 | .topic__6ec1a { 13 | color: var(--nox-white4); 14 | } 15 | 16 | .selected_f37cb1 .header_f37cb1, 17 | .clickable_f37cb1 .header_f37cb1:hover { 18 | background-color: rgba(255,255,255, 0.05); 19 | } 20 | 21 | // remove border 22 | .chat_f75fb0.chat_f75fb0.chat_f75fb0 { 23 | border: none; 24 | } -------------------------------------------------------------------------------- /src/styles/contextmenus.scss: -------------------------------------------------------------------------------- 1 | // outer menu 2 | .menu_c1e9c4 { 3 | box-shadow: none; 4 | background: none; 5 | border: none; 6 | overflow: visible; 7 | border-radius: 2px; 8 | padding: 0 8px; 9 | } 10 | 11 | .menu_c1e9c4.submenu_c1e9c4 { 12 | padding: 0; 13 | } 14 | 15 | // divider line 16 | .separator_c1e9c4 { 17 | display: none; 18 | } 19 | 20 | // inner menu 21 | .scroller_c1e9c4 { 22 | box-shadow: $elevation-shadow; 23 | padding: 0; 24 | overflow: hidden auto !important; 25 | background-color: var(--nox-level2); 26 | 27 | // menu items 28 | .item_c1e9c4 { 29 | margin: 0; 30 | padding: 10px 12px 10px 16px; 31 | border-radius: 0; 32 | 33 | &.colorDefault_c1e9c4 { 34 | color: var(--nox-white6); 35 | 36 | &.focused_c1e9c4 { 37 | // background-color: rgba(225, 225, 225, 0.03); 38 | background-color: var(--nox-accent); 39 | color: var(--nox-white8); 40 | } 41 | } 42 | 43 | &.colorBrand_c1e9c4 { 44 | color: var(--nox-accent); 45 | 46 | &.focused_c1e9c4 { 47 | background-color: var(--nox-accent); 48 | color: var(--nox-white9); 49 | } 50 | } 51 | 52 | &.colorDanger_c1e9c4 { 53 | color: #F04747; 54 | 55 | &.focused_c1e9c4 { 56 | background-color: #F04747; 57 | color: var(--nox-white9); 58 | } 59 | } 60 | 61 | } 62 | 63 | // quick reacts 64 | .wrapper_f563df { 65 | padding: 6px; 66 | } 67 | .button_f563df { 68 | background-color: rgba(225, 225, 225, 0.05); 69 | border-radius: 50%; 70 | 71 | &:hover { 72 | background-color: rgba(225, 225, 225, 0.07); 73 | } 74 | } 75 | } -------------------------------------------------------------------------------- /src/styles/friendslist/dm.scss: -------------------------------------------------------------------------------- 1 | // Search Bar 2 | .privateChannels__35e86 .button__201d5.button__201d5 { 3 | width: 50px; 4 | height: 50px; 5 | border-radius: 50%; 6 | padding: 0; 7 | font-size: 0; 8 | border: none; 9 | min-width: unset; 10 | background: none; 11 | } 12 | 13 | .privateChannels__35e86 .searchBar__35e86 { 14 | position: absolute; 15 | bottom: calc(var(--custom-app-panels-height, 0) + 15px); 16 | right: 10px; 17 | width: 50px; 18 | height: 50px; 19 | border-radius: 50%; 20 | padding: 0; 21 | background: var(--nox-level1); 22 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNS41IDE0aC0uNzlsLS4yOC0uMjdDMTUuNDEgMTIuNTkgMTYgMTEuMTEgMTYgOS41IDE2IDUuOTEgMTMuMDkgMyA5LjUgM1MzIDUuOTEgMyA5LjUgNS45MSAxNiA5LjUgMTZjMS42MSAwIDMuMDktLjU5IDQuMjMtMS41N2wuMjcuMjh2Ljc5bDUgNC45OUwyMC40OSAxOWwtNC45OS01em0tNiAwQzcuMDEgMTQgNSAxMS45OSA1IDkuNVM3LjAxIDUgOS41IDUgMTQgNy4wMSAxNCA5LjUgMTEuOTkgMTQgOS41IDE0eiIvPgo8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==); 23 | background-repeat: no-repeat; 24 | background-size: 40%; 25 | background-position: left 50% bottom 47%; 26 | box-shadow: 0px 5px 10px rgb(0 0 0 / 40%), 0px -1px 5px rgb(0 0 0 / 20%) inset, 0px 3px 4px rgb(255 255 255 / 3%) inset; 27 | } 28 | 29 | .privateChannels__35e86 .searchBar__35e86:hover { 30 | background-color: #353535; 31 | box-shadow: 0 10px 15px rgba(0 0 0 / 50%), 0 -1px 5px rgba(0 0 0 / 20%) inset, 0 3px 4px rgba(255 255 255 / 5%) inset; 32 | } -------------------------------------------------------------------------------- /src/styles/guilds/homeicon.scss: -------------------------------------------------------------------------------- 1 | // Seems un-needed, will have to verify 2 | // // Home Icon 3 | // .homeIcon__560eb { 4 | // width: 32px; 5 | // height: 32px; 6 | // } 7 | 8 | // Change to home symbol 9 | .childWrapper__6e9f8 { 10 | svg { 11 | width: 32px; 12 | height: 32px; 13 | } 14 | path { 15 | d: path("M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z") !important; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/guilds/hover+unread.scss: -------------------------------------------------------------------------------- 1 | // blanks pill item 2 | .listItem__650eb .item__58105 { 3 | box-sizing: border-box; 4 | background: none; 5 | margin: 0; 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | // set up hover/active/selected bg 11 | .wrapper_cc5dd2::after { 12 | content: ""; 13 | display: block; 14 | position: absolute; 15 | top: 0; 16 | width: 100%; 17 | height: 100%; 18 | background: none; 19 | z-index: -1; 20 | } 21 | 22 | // hover bg 23 | .wrapper_cc5dd2:hover::after { 24 | background: var(--nox-white1); 25 | } 26 | 27 | // active bg 28 | .wrapper_cc5dd2:active::after, 29 | .listItem__650eb:has(.item__58105[style="opacity: 1; height: 40px; transform: none;"]) .wrapper_cc5dd2::after { 30 | background: var(--nox-black2); 31 | } 32 | 33 | // set up unread circle 34 | .wrapper_cc5dd2::before { 35 | content: ""; 36 | display: block; 37 | position: absolute; 38 | width: 52px; 39 | height: 52px; 40 | top: 6px; 41 | left: 6px; 42 | margin: auto; 43 | border: var(--nox-notification-width) solid transparent; 44 | border-radius: 50%; 45 | opacity: 0.7; 46 | } 47 | 48 | // unread 49 | .listItem__650eb:has(.item__58105[style="opacity: 1; height: 8px; transform: none;"]) .wrapper_cc5dd2::before { 50 | border-color: var(--nox-notification-color); 51 | } 52 | 53 | // change hover/active/selected background for folders 54 | ul[id*=folder-items] .wrapper_cc5dd2::after { 55 | width: 60px; 56 | left: 5px; 57 | } 58 | 59 | // prevent hover highlight for open folder icon 60 | .folderGroup__48112.isExpanded__48112 .folderButton__48112 .wrapper_cc5dd2::after { 61 | content: none 62 | } 63 | .folderIcon__48112.folderIcon__48112:hover { 64 | background: none; 65 | } 66 | 67 | // folder material icon hover/open 68 | .folderIcon__48112:hover svg path { 69 | d: path("M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"); 70 | } 71 | 72 | // last item in folder hover 73 | ul[id*=folder-items] .listItem__650eb:last-child .wrapper_cc5dd2::after { 74 | border-radius: 0 0 30px 30px; 75 | height: 62px; 76 | } 77 | 78 | -------------------------------------------------------------------------------- /src/styles/members/index.scss: -------------------------------------------------------------------------------- 1 | .members_c8ffbb, 2 | // .members_c8ffbb > div, 3 | .member__5d473 { 4 | background: var(--nox-level2); 5 | color: var(--nox-white5); 6 | } 7 | 8 | .container_c8ffbb { 9 | z-index: $channels-elevation; 10 | box-shadow: $elevation-shadow; 11 | background: var(--nox-level2); 12 | border: none; 13 | } 14 | .container_cc72c1, // Role name 15 | .activity__5d473 { 16 | color: var(--nox-white4); 17 | } 18 | 19 | .childContainer__91a9d { 20 | border-radius: 4px; 21 | padding: 2px 8px; 22 | } 23 | 24 | .clickable__91a9d:hover .childContainer__91a9d { // hover on member 25 | background-color: rgba(255, 255, 255, 0.05); 26 | color: var(--nox-white7); 27 | } 28 | 29 | .selected__91a9d .childContainer__91a9d { // selected member 30 | background-color: var(--nox-level3); 31 | color: var(--nox-white9); 32 | } -------------------------------------------------------------------------------- /src/styles/scrollers.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 13px; 3 | } 4 | 5 | ::-webkit-scrollbar-track { 6 | display: none; 7 | } 8 | 9 | ::-webkit-scrollbar-track-piece { 10 | border: 4px solid var(--nox-white0) !important; 11 | background-color: rgba(0, 0, 0, 0) !important; 12 | } 13 | 14 | ::-webkit-scrollbar-thumb { 15 | display: initial; 16 | border-radius: 0 !important; 17 | background-color: rgba(225, 225, 225, 0.1) !important; 18 | } 19 | 20 | ::-webkit-scrollbar-thumb:hover { 21 | background-color: rgba(225, 225, 225, 0.15) !important; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb:active { 25 | background-color: rgba(225, 225, 225, 0.2) !important; 26 | } -------------------------------------------------------------------------------- /src/styles/settings/sidebarview/closebutton.scss: -------------------------------------------------------------------------------- 1 | // Replace existing icon with our own 2 | .standardSidebarView__23e6b .closeButton_c2b141 { 3 | position: relative; 4 | border: 0; 5 | opacity: 0.8; 6 | background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="); 7 | background-repeat: no-repeat; 8 | background-position: 50%; 9 | } 10 | 11 | // Hide existing icon 12 | .standardSidebarView__23e6b .closeButton_c2b141 svg { 13 | display: none; 14 | } 15 | 16 | // Hover opacity 17 | .standardSidebarView__23e6b .closeButton_c2b141:hover { 18 | opacity: 1; 19 | background-color: transparent; 20 | } 21 | 22 | // Setup the material active animation 23 | .standardSidebarView__23e6b .closeButton_c2b141::after { 24 | content: ""; 25 | display: block; 26 | position: absolute; 27 | width: 100%; 28 | height: 100%; 29 | transform: scale(1.4); 30 | transition: 300ms ease; 31 | border-radius: 50%; 32 | opacity: 0; 33 | background: var(--nox-white); 34 | } 35 | 36 | // Show the active animation 37 | .standardSidebarView__23e6b .closeButton_c2b141:active::after { 38 | transform: scale(1.4); 39 | animation: scale 100ms cubic-bezier(0.4, 0, 0, 1), opacity 100ms ease; 40 | opacity: 0.1; 41 | } 42 | 43 | // Ensure nothing on non-pseudo-element 44 | .standardSidebarView__23e6b .closeButton_c2b141:active { 45 | transform: none; 46 | background-color: transparent; 47 | } 48 | 49 | // Color ESC faintly 50 | .standardSidebarView__23e6b .keybind_c2b141 { 51 | color: var(--nox-white3) !important; 52 | } -------------------------------------------------------------------------------- /src/styles/settings/sidebarview/content/index.scss: -------------------------------------------------------------------------------- 1 | // Content background color 2 | .standardSidebarView__23e6b .contentRegionScroller__23e6b { 3 | background: var(--nox-level2); 4 | } 5 | 6 | .contentColumn__23e6b .input__0f084, 7 | .bioTextArea__6a919.bioTextArea__6a919 { 8 | background-color: var(--nox-level1); 9 | } 10 | 11 | .itemFilled__001a7 { 12 | background-color: var(--nox-level3); 13 | } 14 | 15 | .itemFilled__001a7[aria-checked="true"] { 16 | background-color: var(--nox-level1); 17 | } 18 | 19 | .top_b3f026 .brand_b3f026.item_b3f026:hover { 20 | border-color: var(--nox-white4); 21 | } 22 | .top_b3f026 .brand_b3f026.selected_b3f026.item_b3f026 { 23 | border-color: var(--nox-accent); 24 | } 25 | 26 | .avatarBackground_eb2508 { 27 | background-color: transparent; 28 | } 29 | 30 | .health_d878e7 { 31 | width: 95%; 32 | } 33 | .line_d878e7, 34 | .marker_d878e7 { 35 | background-color: var(--nox-level3); 36 | } 37 | .marker_d878e7 .empty_d878e7 { 38 | background-color: var(--nox-level1); 39 | } 40 | 41 | .cardPrimary_cb7a0e.outline__73069 { 42 | background: var(--nox-level3); 43 | border: none; 44 | } 45 | 46 | .connectContainer_c7f964 { 47 | background-color: var(--nox-level1); 48 | } 49 | .accountButtonInner_c7f964 { 50 | background-color: var(--nox-level2); 51 | } 52 | 53 | .connection_c7f964 { 54 | background-color: var(--nox-level1-5); 55 | } 56 | .connectionHeader_c7f964 { 57 | background: var(--nox-level1); 58 | } 59 | .metadataContainer_c7f964, 60 | .integration_c7f964 { 61 | background-color: var(--nox-level2); 62 | } 63 | 64 | #appearance-tab .cardPrimary_cb7a0e.outline__73069 { 65 | background-color: var(--nox-level1); 66 | } 67 | 68 | #bd-editor-controls { 69 | background-color: var(--nox-level1); 70 | } 71 | 72 | .bd-addon-list .bd-addon-card { 73 | background: var(--nox-level1-5); 74 | } 75 | .bd-addon-list .bd-addon-header { 76 | background: var(--nox-level1); 77 | } -------------------------------------------------------------------------------- /src/styles/settings/sidebarview/content/noxcard.scss: -------------------------------------------------------------------------------- 1 | #Nox-card { 2 | 3 | .bd-version, 4 | .bd-author { 5 | font-size: 0; 6 | } 7 | 8 | .bd-version::after { 9 | content: "v" var(--nox-version) " "; 10 | font-size: 12px; 11 | } 12 | 13 | .bd-author::after { 14 | content: 'Lilian Tedone, Zerebos, and epic1online'; 15 | font-size: 12px; 16 | } 17 | 18 | } -------------------------------------------------------------------------------- /src/styles/settings/sidebarview/sidebar/index.scss: -------------------------------------------------------------------------------- 1 | // Sidebar background color 2 | .standardSidebarView__23e6b .sidebarRegionScroller__23e6b { 3 | background: var(--nox-level3); 4 | } 5 | 6 | // Separator style 7 | .sidebarRegionScroller__23e6b .separator-2wx7h6 { 8 | height: 2px !important; 9 | background: rgba(255, 255, 255, 0.04) !important; 10 | } -------------------------------------------------------------------------------- /src/styles/settings/sidebarview/sidebar/item.scss: -------------------------------------------------------------------------------- 1 | // Tab background and color for hover 2 | .sidebar__23e6b .side-2ur1Qk .item-3XjbnG.themed-2-lozF:hover { 3 | background-color: rgba(255, 255, 255, 0.05); 4 | color: var(--nox-white); 5 | } 6 | 7 | // Selected tab 8 | .sidebar__23e6b .side-2ur1Qk .item-3XjbnG.themed-2-lozF.selected-g-kMVV:hover, 9 | .sidebar__23e6b .side-2ur1Qk .item-3XjbnG.themed-2-lozF.selected-g-kMVV { 10 | background: var(--nox-accent); 11 | } -------------------------------------------------------------------------------- /src/styles/titlebar.scss: -------------------------------------------------------------------------------- 1 | .leading_c38106::before { 2 | content: ""; 3 | display: block; 4 | width: 70px; 5 | height: 17px; 6 | margin: 3px 0; 7 | background-image: url(inline-image("resources/images/logo.png")); 8 | background-repeat: no-repeat; 9 | background-position: center center; 10 | background-size: contain; 11 | } 12 | 13 | .bar_c38106 { 14 | background: #191919; 15 | padding-left: 0; 16 | } -------------------------------------------------------------------------------- /src/styles/tooltips.scss: -------------------------------------------------------------------------------- 1 | .tooltipPointer__382e7.tooltipPointer__382e7.tooltipPointer__382e7 { 2 | border-top-color: var(--nox-level3); 3 | } 4 | 5 | .tooltipBlack__382e7.tooltipBlack__382e7, 6 | .tooltipPrimary__382e7.tooltipPrimary__382e7 { 7 | background-color: var(--nox-level3); 8 | color: var(--nox-white7); 9 | } 10 | 11 | // message buttons 12 | .buttonsInner__5126c { 13 | background-color: var(--nox-level2); 14 | box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1) !important; 15 | } 16 | 17 | .button_f7ecac { 18 | color: var(--nox-white7); 19 | 20 | &:hover { 21 | background-color: rgba(255, 255, 255, 0.1); 22 | color: var(--nox-white9); 23 | } 24 | 25 | &:active { 26 | background-color: rgba(255, 255, 255, 0.15); 27 | color: var(--nox-white9); 28 | } 29 | 30 | &.selected_f7ecac { 31 | background-color: rgba(0, 0, 0, 0.3); 32 | color: var(--nox-white9); 33 | } 34 | } 35 | 36 | // formatting toolbar 37 | .toolbar_bba883 { 38 | background: var(--nox-level3); 39 | 40 | &::before { 41 | border-top-color: var(--nox-level3); 42 | } 43 | 44 | .icon_bba883 { 45 | color: var(--nox-white6); 46 | } 47 | 48 | .hover_d0ebf2:hover, 49 | .active__05fbc { 50 | background: rgba(255, 255, 255, 0.15); 51 | 52 | .icon_bba883 { 53 | color: var(--nox-white9); 54 | } 55 | } 56 | } 57 | 58 | // toasts 59 | .bd-toast { 60 | background-color: var(--nox-level1); 61 | color: var(--nox-white9); 62 | } -------------------------------------------------------------------------------- /src/styles/userprofiles/index.scss: -------------------------------------------------------------------------------- 1 | .userProfileInner_c69a7b:before { 2 | opacity: 0.75; 3 | } --------------------------------------------------------------------------------