diff --git a/README.md b/README.md index ead5699..80a726c 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,3 @@ -# MOVED -This addon has been moved to a snippets repository. You can find it located [here](https://github.com/discord-extensions/snippets/tree/main/bottom-bar). +# pc-bottom -![Banner](https://github.com/Discord-Theme-Addons/bottom-bar/blob/default/assets/banner.png) - -# Bottom Bar -A nice, simple looking, bottom bar. -- This addon was inspired from [CapnKitten's](https://github.com/CapnKitten) [Spotify Discord](https://github.com/CapnKitten/Spotify-Discord)! - -![Preview](https://github.com/Discord-Theme-Addons/bottom-bar/blob/default/assets/preview.png) - -## Installation -For **[Powercord](http://powercord.dev/)** or **[Vizality](https://vizality.com/)** installation, go to **Themes -> Open a CMD / Powershell / Terminal / Gitbash** in the folder, and enter the following: -``` -git clone https://github.com/Discord-Theme-Addons/bottom-bar -``` - -**For BetterDiscord:** -- [Direct Download](https://github.com/Discord-Theme-Addons/bottom-bar/releases/download/bd-release/BottomBar.theme.css) -- [View Source](https://discord-theme-addons.github.io/bottom-bar/src/support/BottomBar.theme.css) - -**For Browser / Web:** -1. Install the Stylus extension for [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) / [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) / [Opera](https://github.com/openstyles/stylus/wiki/Opera,-Outdated-Stylus). -2. After installing, head over to [this link](https://discord-theme-addons.github.io/bottom-bar/src/support/BottomBar.user.css). -3. Press the "Install Style" button. - -# Credits -Thank you to everyone for their help! -- [@Hoofer](https://github.com/HooferDevelops) for helping me figure out how to get the bottom area below the members list to work as well as finding multiple issues. +Way fatter bottom 🍑 (bottom bar) \ No newline at end of file diff --git a/index.scss b/index.scss index 4d03089..b9bd65f 100644 --- a/index.scss +++ b/index.scss @@ -1,6 +1,6 @@ :root { - --bar-height: 80px; // height of the bar ; default 80px - --bar-bottom-position: 13px; // used to center content within the bar ; default 13px + --bar-height: 100px; // height of the bar ; default 80px + --bar-bottom-position: 15px; // used to center content within the bar ; default 13px --bar-background-primary: var(--background-tertiary); // color of the bar ; default var(--background-tertiary) } diff --git a/src/_theme.scss b/src/_theme.scss index a10a18c..651046d 100644 --- a/src/_theme.scss +++ b/src/_theme.scss @@ -1,8 +1,11 @@ #app-mount { + // guild list .guilds-2JjMmN { padding-bottom: var(--bar-height); - &::before { // i think this was here specifically for coloring + + &::before { + // i think this was here specifically for coloring content: ""; position: absolute; top: var(--bar-height); @@ -19,9 +22,11 @@ max-width: 223px; background-color: transparent; } + #status-picker { margin-bottom: calc(var(--bar-bottom-position) + 4px); } + .sidebar-1tnWFu { height: calc(100% - var(--bar-height)); } @@ -37,7 +42,8 @@ background-color: var(--bar-background-primary); } } - .form-3gdLxP { + + .form-3gdLxP { z-index: 100; padding-top: calc(var(--bar-bottom-position) + 5px); border-radius: 5px 5px 0 0; @@ -48,18 +54,24 @@ margin-top: -3px; padding-right: 15px; padding-left: 15px; + // end ------> .channelTextArea-1FufC0 { margin-top: 0; margin-bottom: 24px; } + &::before { display: none; } - .channelTextArea-1VQBuV { // chat bar - margin-bottom: calc(var(--bar-bottom-position) + 5px); + + .channelTextArea-1VQBuV { + // chat bar + margin-bottom: calc(var(--bar-bottom-position)); } - .base-3bcbY3 { // typing + + .base-3bcbY3 { + // typing bottom: -2px; } } @@ -68,16 +80,22 @@ .container-2o3qEW { height: calc(100% - var(--bar-height)); } + .searchResultsWrap-5RVOkx { margin-bottom: var(--bar-height); } // misc pages - .pageWrapper-2PwDoS, // discovery - .container-2cd8Mz, // friends - .container-36u7Lw, // library - .applicationStore-2nk7Lo { // nitro & store pages + .pageWrapper-2PwDoS, + // discovery + .container-2cd8Mz, + // friends + .container-36u7Lw, + // library + .applicationStore-2nk7Lo { + // nitro & store pages padding-bottom: var(--bar-height); + &::before { content: ""; position: absolute; @@ -89,16 +107,21 @@ } // fixes - .autocomplete-3NRXG8 { // automcplete + .autocomplete-3NRXG8 { + // automcplete bottom: 166%; } + .positionLayer-1cndvf.layer-2aCOJ3 { bottom: calc(var(--bar-height) + 8px) !important; } + .wrapper-2SplAX { margin-bottom: 16px; } - .unreadMentionsIndicatorBottom-3RJMnQ { // server mentions + + .unreadMentionsIndicatorBottom-3RJMnQ { + // server mentions bottom: var(--bar-height); } } \ No newline at end of file diff --git a/src/support/BottomBar.theme.css b/src/support/BottomBar.theme.css index 0df31b7..cdb863b 100644 --- a/src/support/BottomBar.theme.css +++ b/src/support/BottomBar.theme.css @@ -11,7 +11,7 @@ @import url('https://discord-theme-addons.github.io/bottom-bar/src/support/compiled.css'); :root { - --bar-height: 80px; - --bar-bottom-position: 13px; + --bar-height: 100px; + --bar-bottom-position: 15px; --bar-background-primary: var(--background-tertiary); -} +} \ No newline at end of file diff --git a/src/support/BottomBar.user.css b/src/support/BottomBar.user.css index 405d7f1..8361ce4 100644 --- a/src/support/BottomBar.user.css +++ b/src/support/BottomBar.user.css @@ -10,8 +10,8 @@ @import url('https://discord-theme-addons.github.io/bottom-bar/src/support/compiled.css'); :root { - --bar-height: 80px; - --bar-bottom-position: 13px; + --bar-height: 100px; + --bar-bottom-position: 15px; --bar-background-primary: var(--background-tertiary); } -} +} \ No newline at end of file diff --git a/src/support/compiled.css b/src/support/compiled.css index 4e32442..3cf644f 100644 --- a/src/support/compiled.css +++ b/src/support/compiled.css @@ -1,6 +1,7 @@ #app-mount .guilds-2JjMmN { padding-bottom: var(--bar-height); } + #app-mount .guilds-2JjMmN::before { content: ""; position: absolute; @@ -9,18 +10,22 @@ width: 100%; background-color: var(--bar-background-primary); } + #app-mount .container-YkUktl { position: absolute; bottom: var(--bar-bottom-position); max-width: 223px; background-color: transparent; } + #app-mount #status-picker { margin-bottom: calc(var(--bar-bottom-position) + 4px); } + #app-mount .sidebar-1tnWFu { height: calc(100% - var(--bar-height)); } + #app-mount .content-1jQy2l::after { content: ""; position: absolute; @@ -29,6 +34,7 @@ width: 100%; background-color: var(--bar-background-primary); } + #app-mount .form-3gdLxP { z-index: 100; padding-top: calc(var(--bar-bottom-position) + 5px); @@ -40,31 +46,39 @@ padding-right: 15px; padding-left: 15px; } + #app-mount .form-3gdLxP .channelTextArea-1FufC0 { margin-top: 0; margin-bottom: 24px; } + #app-mount .form-3gdLxP::before { display: none; } + #app-mount .form-3gdLxP .channelTextArea-1VQBuV { - margin-bottom: calc(var(--bar-bottom-position) + 5px); + margin-bottom: calc(var(--bar-bottom-position)); } + #app-mount .form-3gdLxP .base-3bcbY3 { bottom: -2px; } + #app-mount .container-2o3qEW { height: calc(100% - var(--bar-height)); } + #app-mount .searchResultsWrap-5RVOkx { margin-bottom: var(--bar-height); } + #app-mount .pageWrapper-2PwDoS, #app-mount .container-2cd8Mz, #app-mount .container-36u7Lw, #app-mount .applicationStore-2nk7Lo { padding-bottom: var(--bar-height); } + #app-mount .pageWrapper-2PwDoS::before, #app-mount .container-2cd8Mz::before, #app-mount .container-36u7Lw::before, @@ -76,15 +90,19 @@ width: 100%; background-color: var(--bar-background-primary); } + #app-mount .autocomplete-3NRXG8 { bottom: 166%; } + #app-mount .positionLayer-1cndvf.layer-2aCOJ3 { bottom: calc(var(--bar-height) + 8px) !important; } + #app-mount .wrapper-2SplAX { margin-bottom: 16px; } + #app-mount .unreadMentionsIndicatorBottom-3RJMnQ { bottom: var(--bar-height); } \ No newline at end of file