sass recode
This commit is contained in:
commit
39d51a1cb3
@ -10,15 +10,6 @@ For manual installation, go to **your themes folder, open a command prompt / po
|
|||||||
git clone https://github.com/LuckFire/BottomBar
|
git clone https://github.com/LuckFire/BottomBar
|
||||||
```
|
```
|
||||||
|
|
||||||
For quick installation (not recommended), go to **Settings -> Themes -> Quick CSS** and copy-paste the following code:
|
|
||||||
```css
|
|
||||||
@import url("https://raw.githack.com/LuckFire/BottomBar/master/bottombar.theme.css");
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--bar-color: var(--background-tertiary) !important; /* Changes the bar color. */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Other Support Installation
|
## Other Support Installation
|
||||||
I have added support for Discord Revert, but I had to put it into another repository. If you're using Revert Discord and would like to use bottom bar, go to **your themes folder, open a command prompt / powershell / terminal / or git bash** and enter the following:
|
I have added support for Discord Revert, but I had to put it into another repository. If you're using Revert Discord and would like to use bottom bar, go to **your themes folder, open a command prompt / powershell / terminal / or git bash** and enter the following:
|
||||||
```
|
```
|
||||||
|
1
index.scss
Normal file
1
index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@use "./src/bottom-bar.scss";
|
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"name": "Bottom Bar",
|
"name": "Bottom Bar",
|
||||||
"description": "A nice, simple looking, bottom bar.",
|
"description": "A nice, simple looking, bottom bar.",
|
||||||
"version": "1.1.2",
|
"version": "1.2.0",
|
||||||
"author": "LuckFire#4800",
|
"author": "LuckFire#4800",
|
||||||
"theme": "bottombar.theme.css",
|
"theme": "index.scss",
|
||||||
"consent": "false",
|
"consent": "false",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
}
|
}
|
||||||
|
157
src/bottom-bar.scss
Normal file
157
src/bottom-bar.scss
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
$primary-bar-color: var(--background-tertiary); /* Changes the bar color. */
|
||||||
|
$secondary-bar-color: var(--background-secondary-alt); /* Changes misc colors. */
|
||||||
|
|
||||||
|
/* Username */
|
||||||
|
.panels-j1Uci_ .container-3baos1 {
|
||||||
|
position: relative;
|
||||||
|
height: 85px;
|
||||||
|
background: $primary-bar-color;
|
||||||
|
|
||||||
|
.noWrap-3jynv6 {
|
||||||
|
position: relative;
|
||||||
|
left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Chatbar */
|
||||||
|
.form-2fGMdU {
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
padding-top: 20px;
|
||||||
|
margin-top: -10px;
|
||||||
|
bottom: -2px;
|
||||||
|
background: $primary-bar-color;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Follow Channel */
|
||||||
|
.form-2fGMdU .wrapper-39oAo3 {
|
||||||
|
padding-top: 8px;
|
||||||
|
|
||||||
|
.content-c_0cLD {
|
||||||
|
padding-top: 25px;
|
||||||
|
|
||||||
|
.text-2yjo70 {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .buttonContainer-3AU1Ij {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Serverlist */
|
||||||
|
.wrapper-1Rf91z {
|
||||||
|
width: 90px;
|
||||||
|
height: calc(100% - 86px);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: fixed;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 86px;
|
||||||
|
bottom: 0;
|
||||||
|
background: $primary-bar-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Member List */
|
||||||
|
.members-1998pB {
|
||||||
|
height: calc(100% - 86px);
|
||||||
|
}
|
||||||
|
.membersWrap-2h-GB4 {
|
||||||
|
background: $primary-bar-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Discovery Page */
|
||||||
|
.pageWrapper-1PgVDX {
|
||||||
|
height: calc(100% - 86px);
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
background: $primary-bar-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Tabs in Home */
|
||||||
|
.container-1D34oG,
|
||||||
|
.container-3Mxszk,
|
||||||
|
.applicationStore-1pNvnv {
|
||||||
|
height: calc(100% - 86px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Search Scroller */
|
||||||
|
.searchResultsWrap-3-pOjs {
|
||||||
|
height: calc(100% - 86px);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: fixed;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 86px;
|
||||||
|
bottom: 0;
|
||||||
|
background: $primary-bar-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Join/Create a sever */
|
||||||
|
.tutorialContainer-SGrQ1h,
|
||||||
|
[aria-label="Servers"] + .listItem-2P_4kh {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
border-radius: 0 50px 50px 0;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
bottom: 10px;
|
||||||
|
background: $secondary-bar-color;
|
||||||
|
transition: all 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
padding-left: 3px;
|
||||||
|
transition: all 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemWrapper-3X98Pc .wrapper-25eVIn svg foreignObject .circleIconButton-jET_ig {
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem-2P_4kh .pill-3YxEhL {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[aria-label="Servers"] + .listItem-2P_4kh {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Positioning Fixes/Other Changes */
|
||||||
|
.styleFixed-sX-yHV, /* Status Picker */
|
||||||
|
.contentWrapper-SvZHNd /* Emote/GIF Picker */ {
|
||||||
|
position: relative;
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animatorBottom-fS5rNO { /* Server Menu Popout */
|
||||||
|
position: relative;
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-1vrmpx { /* Autocomplete */
|
||||||
|
bottom: calc(100% + 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.channelTextAreaDisabled-8rmlrp { /* Hide Disabled Text Chatbar */
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
@ -2,14 +2,13 @@
|
|||||||
--bar-color: var(--background-tertiary); /* Changes the bar color. */
|
--bar-color: var(--background-tertiary); /* Changes the bar color. */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Username */
|
/* Username */
|
||||||
.panels-j1Uci_ > .container-3baos1 {
|
.panels-j1Uci_ .container-3baos1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 85px;
|
height: 85px;
|
||||||
background: var(--bar-color);
|
background: var(--bar-color);
|
||||||
}
|
}
|
||||||
.container-3baos1 > .noWrap-3jynv6 {
|
.container-3baos1 .noWrap-3jynv6 {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 5px !important;
|
left: 5px !important;
|
||||||
}
|
}
|
||||||
@ -33,14 +32,14 @@
|
|||||||
|
|
||||||
|
|
||||||
/* Follow Channel */
|
/* Follow Channel */
|
||||||
.form-2fGMdU > .wrapper-39oAo3,
|
.form-2fGMdU .wrapper-39oAo3,
|
||||||
.content-c_0cLD + .buttonContainer-3AU1Ij {
|
.content-c_0cLD + .buttonContainer-3AU1Ij {
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
}
|
}
|
||||||
.form-2fGMdU > .wrapper-39oAo3 > .content-c_0cLD {
|
.form-2fGMdU .wrapper-39oAo3 .content-c_0cLD {
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
}
|
}
|
||||||
.form-2fGMdU > .wrapper-39oAo3 > .content-c_0cLD > .text-2yjo70 {
|
.form-2fGMdU .wrapper-39oAo3 .content-c_0cLD .text-2yjo70 {
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -120,12 +119,12 @@
|
|||||||
padding-left: 3px;
|
padding-left: 3px;
|
||||||
transition: all 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
|
transition: all 150ms cubic-bezier(0.55, 0.09, 0.68, 0.53);
|
||||||
}
|
}
|
||||||
.tutorialContainer-SGrQ1h > div > .listItemWrapper-3X98Pc > div > svg > foreignObject > .circleIconButton-jET_ig,
|
.tutorialContainer-SGrQ1h div .listItemWrapper-3X98Pc div svg foreignObject .circleIconButton-jET_ig,
|
||||||
[aria-label="Servers"] + .listItem-2P_4kh > .listItemWrapper-3X98Pc > div > svg > foreignObject > .circleIconButton-jET_ig {
|
[aria-label="Servers"] + .listItem-2P_4kh .listItemWrapper-3X98Pc div svg foreignObject .circleIconButton-jET_ig {
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
}
|
}
|
||||||
.tutorialContainer-SGrQ1h > div > .pill-3YxEhL,
|
.tutorialContainer-SGrQ1h div .pill-3YxEhL,
|
||||||
[aria-label="Servers"] + .listItem-2P_4kh > .pill-3YxEhL {
|
[aria-label="Servers"] + .listItem-2P_4kh .pill-3YxEhL {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -152,4 +151,4 @@
|
|||||||
|
|
||||||
.channelTextAreaDisabled-8rmlrp {
|
.channelTextAreaDisabled-8rmlrp {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user