🍴 Initial fork

Signed-off-by: milky <op@gfy.lol>
This commit is contained in:
milky 2022-07-18 20:34:04 -07:00
parent 20ecbd2ef3
commit 977d0e20f2
No known key found for this signature in database
GPG Key ID: B6CE41C2DFE6B9B7
6 changed files with 63 additions and 48 deletions

View File

@ -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)

View File

@ -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)
}

View File

@ -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);
}
}

View File

@ -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);
}
}

View File

@ -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);
}
}
}

View File

@ -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);
}