parent
20ecbd2ef3
commit
977d0e20f2
30
README.md
30
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)
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
Loading…
Reference in New Issue