lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Emotes semi-rewrite, removal of old styles and broken setting, temporarily comment out patcher code for .bd-guild. (#511) 

* emotes semi-rewrite

* Remove unnessecary className

* Pad bd-button to be used practically outside of the addons list.

* card styling consistency, temporarily remove guild patcher to avoid unintended side-effects

* lint

* forgot to comment some code

* code cleanup

* this gap property isnt applying

* remove "show names" emote function

this feature appears to be broken, and is such a small tweak that I doubt anyone would intentionally disable it.

* Change `open` and `closed` states to `expanded and `collapsed`.

* Emote collapse styling fix
This commit is contained in:
Tropical 2020-12-12 14:33:32 -06:00 committed by GitHub
parent 3ab655594b
commit 1bb613942f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 168 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/locales/de.json
View File

@ -151,10 +151,6 @@
"name": "Automatische Großschreibung von Emotes",
"note": "Emote-Befehle werden automatisch großgeschrieben"
},
"showNames": {
"name": "Namen anzeigen",
"note": "Zeigt den Emote-Namen beim Hovern über diesem an"
},
"modifiers": {
"name": "Emote-Modifikatoren anzeigen",
"note": "Aktiviert Emote-Modifikatoren (flip, spin, pulse, spin2, spin3, 1spin, 2spin, 3spin, tr, bl, br, shake, shake2, shake3, flap)"

4
assets/locales/en.json
View File

@ -151,10 +151,6 @@
"name": "Emote Autocapitalization",
"note": "Autocapitalize emote commands"
},
"showNames": {
"name": "Show Names",
"note": "Show emote names on hover"
},
"modifiers": {
"name": "Show Emote Modifiers",
"note": "Enable emote mods (flip, spin, pulse, spin2, spin3, 1spin, 2spin, 3spin, tr, bl, br, shake, shake2, shake3, flap)"

4
assets/locales/ja.json
View File

@ -130,10 +130,6 @@
"name": "絵文字自動補完",
"note": "絵文字を自動で補完します"
},
"showNames": {
"name": "名前を表示",
"note": "ホバー時に絵文字の名前を表示します"
},
"modifiers": {
"name": "BetterDiscord絵文字を表示",
"note": "BetterDiscordの絵文字を有効化します(flip, spin, pulse, spin2, spin3, 1spin, 2spin, 3spin, tr, bl, br, shake, shake2, shake3, flap)"

4
assets/locales/sv.json
View File

@ -130,10 +130,6 @@
"name": "Automatiskt Stor Bokstav I Emotes",
"note": "Gör automatiskt stor bokstav i emote kommandon"
},
"showNames": {
"name": "Visa namn",
"note": "Visa namn när musen hålls över en emote"
},
"modifiers": {
"name": "Visa Emote Modifierare",
"note": "Aktivera emote modifierare (flip, spin, pulse, spin2, spin3, 1spin, 2spin, 3spin, tr, bl, br, shake, shake2, shake3, flap)"

16
src/builtins/emotes/category.jsx
View File

@ -5,23 +5,23 @@ export default class Category extends React.Component {
constructor(props) {
super(props);
this.state = {
opened: true
expanded: true
};
}
render() {
return <div className="bd-emote-category">
<div className="bd-emote-content">
<div className="bd-emote-header" onClick={() => this.setState({opened: !this.state.opened})}>
<div className="bd-emote-headerIcon">
<div className={`bd-emote-header ${this.state.expanded ? "expanded" : "collapsed"}`}>
<div className="bd-emote-header-inner" onClick={() => this.setState({expanded: !this.state.expanded})}>
<div className="bd-emote-header-icon">
{this.props.icon ? this.props.icon : null}
</div>
<div className="bd-emote-headerLabel">{this.props.label}</div>
<div className="bd-emote-headerCollapseIcon">
<DownArrow className={this.state.opened ? "bd-emote-opened" : "bd-emote-closed"}/>
<div className="bd-emote-header-label">{this.props.label}</div>
<div className={`bd-emote-collapse-icon ${this.state.expanded ? "expanded" : "collapsed"}`}>
<DownArrow/>
</div>
</div>
</div>
{this.state.opened && this.props.children}
{this.state.expanded && this.props.children}
</div>;
}
}

1
src/data/settings/emoteconfig.js
View File

@ -8,7 +8,6 @@ export default [
{type: "switch", id: "download", value: true},
{type: "switch", id: "emoteMenu", value: true},
{type: "switch", id: "hideEmojiMenu", value: false, enableWith: "emoteMenu"},
{type: "switch", id: "showNames", value: true},
{type: "switch", id: "modifiers", value: true},
{type: "switch", id: "animateOnHover", value: false}
]

4
src/data/strings.js
View File

@ -155,10 +155,6 @@ export default {
name: "Emote Autocapitalization",
note: "Autocapitalize emote commands"
},
showNames: {
name: "Show Names",
note: "Show emote names on hover"
},
modifiers: {
name: "Show Emote Modifiers",
note: "Enable emote mods (flip, spin, pulse, spin2, spin3, 1spin, 2spin, 3spin, tr, bl, br, shake, shake2, shake3, flap)"

20
src/modules/componentpatcher.js
View File

@ -12,9 +12,11 @@ export default new class ComponentPatcher {
initialize() {
Utilities.suppressErrors(this.patchSocial.bind(this), "BD Social Patch")();
/*
Utilities.suppressErrors(this.patchGuildPills.bind(this), "BD Guild Pills Patch")();
Utilities.suppressErrors(this.patchGuildListItems.bind(this), "BD Guild List Items Patch")();
Utilities.suppressErrors(this.patchGuildSeparator.bind(this), "BD Guild Separator Patch")();
*/
Utilities.suppressErrors(this.patchMessageHeader.bind(this), "BD Message Header Patch")();
Utilities.suppressErrors(this.patchMemberList.bind(this), "BD Member List Patch")();
}
@ -57,7 +59,8 @@ export default new class ComponentPatcher {
};
});
}
/*
patchGuildListItems() {
if (this.guildListItemsPatch) return;
const listItemClass = DiscordModules.GuildClasses.listItem.split(" ")[0];
@ -107,7 +110,7 @@ export default new class ComponentPatcher {
if (!Separator) return;
Separator.type = GuildSeparator;
});
}
}*/
patchMessageHeader() {
if (this.messageHeaderPatch) return;
@ -156,18 +159,19 @@ export default new class ComponentPatcher {
// Tropical's notes
/*
html [maximized | bd]
html [maximized | bd | stable | canary | ptb]
.iconWrapper-2OrFZ1 [type]
.sidebar-2K8pFh [guild-id]
.wrapper-2jXpOf [voice | text | announcement | store | private | nsfw]
.chat-3bRxxu [channnel | guild-id]
.wrapper-2jXpOf [voice | text | announcement | store | private | nsfw | rules]
.chat-3bRxxu [channnel-name | guild-id]
.listItem-2P_4kh [type | state]
.privateChannels-1nO12o [library-hidden]
.member-3-YXUe [user-id]
.message-2qnXI6 [type | author-id | group-end]
.message-2qnXI6 [type | author-id | group-end | message-content]
.wrapper-3t9DeA [user-id | status]
.userPopout-3XzG_A [state | user-id]
.root-SR8cQa [state | user-id]
.userPopout-3XzG_A [user-id]
.root-SR8cQa [user-id]
.contentRegion-3nDuYy [settings-page]
.item-PXvHYJ [settings-page]
.wrapper-35wsBm [valid | expired | joined]
*/

2
src/modules/datastore.js
View File

@ -65,7 +65,7 @@ export default new class DataStore {
};
const newEmotes = {
general: {download: oldSettings["fork-es-3"], emoteMenu: oldSettings["bda-es-0"], hideEmojiMenu: !oldSettings["bda-es-9"], showNames: oldSettings["bda-es-6"], modifiers: oldSettings["bda-es-8"], animateOnHover: oldSettings["fork-es-2"]},
general: {download: oldSettings["fork-es-3"], emoteMenu: oldSettings["bda-es-0"], hideEmojiMenu: !oldSettings["bda-es-9"], modifiers: oldSettings["bda-es-8"], animateOnHover: oldSettings["fork-es-2"]},
categories: {twitchglobal: oldSettings["bda-es-7"], twitchsubscriber: oldSettings["bda-es-7"], frankerfacez: oldSettings["bda-es-1"], bttv: oldSettings["bda-es-2"]}
};

198
src/styles/builtins/emotemenu.css
View File

@ -1,132 +1,82 @@
#removemenu {
width: auto;
background: #505050;
z-index: 999999;
box-shadow: 0 0 2px #000;
padding: 2px;
left: 25px;
display: block;
cursor: pointer;
color: #fff;
position: fixed;
}
#removemenu ul a {
text-decoration: none;
color: #fff;
padding: 3px;
}
.emotewrapper {
position: relative;
display: inline-flex;
object-fit: contain;
margin: -0.1em 0.05em -0.2em 0.1em;
vertical-align: top;
}
.emotewrapper.jumboable {
margin-bottom: 0;
margin-top: 0.2em;
vertical-align: -0.3em;
}
.emote {
height: 1.45em;
}
.emote.jumboable {
height: 2rem;
}
.fav {
display: none;
position: absolute;
width: 15px;
height: 15px;
right: -7px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAzFBMVEUAAABQUFBMTExLS0tNTU1MTExNTU1NTU1MTExMTExNTU1LS0tEREBEREBEREBEREBJSUhLS0tLS0tEREBNTU1NTU1NTU1EREArKyhNTU1NTU0AAABMTExKSklMTExNTU1NTU1NTU1KSkpMTExKSkhNTU1KSkpISEZNTU1LS0tAQDxOTk5KSkpLS0tNTU1MTExMTEx/f39MTExMTExLS0pLS0tMTExNTU1NTU1LS0pNTU1NTU1NTU1NTU1NTU1NTUxNTU1NTU1NTUxMTEzB8C/5AAAAOnRSTlMAI8X96oWAgYSF68QBAg0PMCb9BIuLgQUD4N0Bh0mKhZSOQ4gcrKscaW8QRE6fmJyjAshASceG7cIpqQOxTQAAALVJREFUGFddx6FOA0EYAOGZvd07Qm6vVCAAgUUgQEDfX/YZMAigqaFN7iC5tsmPqGPUN/AvUVeoEbGOCElJz08Uzeixqu4AqomVVSNngOVjTqDGZSl3UFtPGV2ot2zaq96YM9p5Ddzcf/nTTAlj+/sNtNu8OcwkIsbPBtrUfMQeEhGQmHbmGIFMwLPzu6UMIwBNgToshgq8Nr2ki+Oy7ebDHp70LRPWB6OZgfWLWei7fJonOOsPCGA9kVlssOoAAAAASUVORK5CYII=");
border: none;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #303030;
border-radius: 5px;
top: -7px;
cursor: pointer;
}
.fav.active {
background-color: yellow;
}
.emotewrapper:hover .fav {
display: block;
}
.emojiPicker-3m1S-j {
box-shadow: none;
border-top: none;
border-radius: 0 0 5px 5px;
}
#bd-qem {
border-radius: 5px 5px 0 0;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
height: 30px;
display: flex;
flex-direction: row;
padding-right: 1px;
}
#bd-qem button {
border-left: 1px solid #efefef;
background: transparent;
box-shadow: #cecece 1px 0 0 0;
flex-grow: 1;
}
#bd-qem button:hover {
background: #ececec;
}
#bd-qem-twitch {
border-radius: 5px 0 0 0;
order: 2;
}
#bd-qem-emojis {
border-radius: 0 5px 0 0;
order: 3;
}
#bd-qem-favourite {
order: 3;
}
#bd-qem button.active {
background-color: #e2e2e2;
}
#bd-emote-menu {
width: 346px;
height: 329px;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
#bd-emote-menu .scrollerBase-289Jih {
height: 100%;
.bd-emote-menu {
min-height: 0;
}
.bd-emote-menu-inner {
padding: 5px 0 0 15px;
padding: 8px 0 0 16px;
}
.bd-qme-hidden #bd-qem-emojis {
display: none;
.bd-emote-scroller {
height: 100%;
}
.bd-em-scroller {
height: 400px;
.bd-emote-header {
display: flex;
align-items: center;
background: var(--background-secondary);
height: 32px;
padding: 0 4px;
position: sticky;
top: 0;
z-index: 2;
}
.bd-emote-header-inner {
cursor: pointer;
display: flex;
align-items: center;
color: var(--header-secondary);
font-size: 12px;
font-weight: 600;
transition: color 0.125s;
width: fit-content;
}
.bd-emote-header-inner:hover {
color: var(--header-primary);
}
.bd-emote-header-icon {
width: 16px;
height: 16px;
}
.bd-emote-header-icon svg {
max-height: 100%;
max-width: 100%;
}
.bd-emote-header-label {
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
margin: 0 8px;
}
.bd-emote-collapse-icon svg {
transition: transform 0.1s;
}
.bd-emote-collapse-icon.expanded svg {
transform: rotate(-90deg);
}
.bd-emote-item {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px;
border-radius: 5px;
width: 30px;
height: 30px;
position: relative;
}
.bd-emote-item:hover {
background: var(--background-accent);
}
.bd-emote-item img {
max-width: 100%;
}

122
src/styles/builtins/emotes.css
View File

@ -1,97 +1,53 @@
.bd-emote-header {
color: var(--header-secondary);
justify-content: flex-start;
font-size: 12px;
font-weight: 600;
transition: color 0.125s;
align-items: center;
display: flex;
}
.bd-emote-scroller {
max-height: 380px;
}
.bd-emote-category {
margin-bottom: 12px;
}
.bd-emote-content {
cursor: pointer;
position: sticky;
top: 0;
background: var(--background-secondary);
z-index: 2;
}
.bd-emote-wrapper {
background-color: var(--background-secondary);
box-sizing: border-box;
height: 32px;
padding: 0 4px;
z-index: 1;
}
.bd-emote-headerIcon {
width: 14px;
height: 14px;
margin-right: 8px;
}
.bd-emote-headerLabel {
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
margin-right: 8px;
}
.bd-emote-headerIcon + .bd-emote-headerLabel {
margin-left: 8px;
}
.bd-emote-headerCollapseIcon .bd-emote-opened {
transition: 0.3s;
}
.bd-emote-headerCollapseIcon .bd-emote-closed {
transform: rotate(90deg);
transition: 0.3s;
}
#emote-container {
padding: 10px;
}
.emote-container {
display: inline-block;
padding: 2px;
border-radius: 5px;
width: 30px;
height: 30px;
.emotewrapper {
position: relative;
display: inline-flex;
object-fit: contain;
margin: -0.1em 0.05em -0.2em 0.1em;
vertical-align: top;
}
.emote-icon {
max-width: 100%;
max-height: 100%;
.emotewrapper.jumboable {
margin-bottom: 0;
margin-top: 0.2em;
vertical-align: -0.3em;
}
.emote {
height: 1.45em;
}
.emote.jumboable {
height: 2rem;
}
.fav {
display: none;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 15px;
height: 15px;
right: -7px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAzFBMVEUAAABQUFBMTExLS0tNTU1MTExNTU1NTU1MTExMTExNTU1LS0tEREBEREBEREBEREBJSUhLS0tLS0tEREBNTU1NTU1NTU1EREArKyhNTU1NTU0AAABMTExKSklMTExNTU1NTU1NTU1KSkpMTExKSkhNTU1KSkpISEZNTU1LS0tAQDxOTk5KSkpLS0tNTU1MTExMTEx/f39MTExMTExLS0pLS0tMTExNTU1NTU1LS0pNTU1NTU1NTU1NTU1NTU1NTUxNTU1NTU1NTUxMTEzB8C/5AAAAOnRSTlMAI8X96oWAgYSF68QBAg0PMCb9BIuLgQUD4N0Bh0mKhZSOQ4gcrKscaW8QRE6fmJyjAshASceG7cIpqQOxTQAAALVJREFUGFddx6FOA0EYAOGZvd07Qm6vVCAAgUUgQEDfX/YZMAigqaFN7iC5tsmPqGPUN/AvUVeoEbGOCElJz08Uzeixqu4AqomVVSNngOVjTqDGZSl3UFtPGV2ot2zaq96YM9p5Ddzcf/nTTAlj+/sNtNu8OcwkIsbPBtrUfMQeEhGQmHbmGIFMwLPzu6UMIwBNgToshgq8Nr2ki+Oy7ebDHp70LRPWB6OZgfWLWei7fJonOOsPCGA9kVlssOoAAAAASUVORK5CYII=");
border: none;
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #303030;
border-radius: 5px;
top: -7px;
cursor: pointer;
}
.fav.active {
background-color: yellow;
}
.emotewrapper:hover .fav {
display: block;
}
.emote.stop-animation {
animation: none;
}
.emote-container:hover {
background: rgba(123, 123, 123, 0.37);
}
.emoteflip,
.emotespinflip {
transform: scaleX(-1);

29
src/styles/builtins/publicservers.css
View File

@ -64,9 +64,30 @@
position: relative;
transition: box-shadow 0.2s ease-out, transform 0.2s ease-out, background 0.2s ease-out, opacity 0.2s ease-in;
cursor: pointer;
background-color: var(--activity-card-background);
}
.theme-light .bd-server-card {
box-shadow: 0 0 0 1px rgba(185, 187, 190, 0.3), var(--elevation-medium);
}
.theme-dark .bd-server-card {
background-color: var(--background-secondary-alt);
}
.bd-server-card:hover,
.bd-server-card:focus,
.theme-light .bd-server-card:hover,
.theme-light .bd-server-card:focus {
transform: translateY(-1px);
box-shadow: var(--elevation-high);
}
.theme-dark .bd-server-card:hover,
.theme-dark .bd-server-card:focus {
background-color: var(--background-tertiary);
}
.bd-placeholder-card {
background-color: var(--background-secondary-alt);
animation: bd-placeholder-card-pulse 1.8s ease-in-out infinite;
@ -77,12 +98,6 @@
position: relative;
}
.bd-server-card:hover {
background-color: var(--background-tertiary);
transform: translateY(-1px);
box-shadow: var(--elevation-high);
}
.bd-server-header {
height: 143px;
position: relative;
@ -166,7 +181,7 @@
-webkit-box-orient: vertical;
color: var(--header-secondary);
font-size: 14px;
line-height: 18px;
line-height: normal;
}
.bd-server-footer {

8
src/styles/buttons.css
View File

@ -5,16 +5,16 @@
background-color: #3e82e5;
color: #fff;
border-radius: 3px;
padding: 3px 6px;
transition: opacity 250ms ease;
padding: 4px 8px;
transition: background-color 0.17s ease, color 0.17s ease, opacity 250ms ease;
}
.bd-button:hover {
background-color: rgb(56, 117, 206);
background-color: #3875ce;
}
.bd-button:active {
background-color: rgb(50, 104, 183);
background-color: #3268b7;
}
.bd-button.bd-button-success {

7
src/styles/ui/addonlist.css
View File

@ -148,6 +148,7 @@
.bd-controls > .bd-addon-button {
border-radius: 0;
padding: 3px 6px;
}
.bd-links .bd-addon-button + .bd-addon-button {
@ -166,16 +167,18 @@
border-radius: 0 3px 3px 0;
}
.bd-controls > .bd-addon-button:only-child {
border-radius: 3px;
}
.bd-controls + .bd-addon-list {
margin-top: 10px;
}
.bd-addon-controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 5px;
}
.bd-addon-controls .bd-search {

204
src/styles/ui/bdsettings.css
View File

@ -14,116 +14,10 @@
fill: #3e82e5;
}
.standardSidebarView-3F1I7i .bd-versioninfo-wrapper {
bottom: 0;
left: 0;
position: fixed;
background: inherit;
right: 0;
padding: 5px;
}
.standardSidebarView-3F1I7i .bd-versioninfo-wrapper span {
color: #b9bbbe;
font-weight: 600;
font-size: 11px;
}
.standardSidebarView-3F1I7i .bd-versioninfo-wrapper a {
font-size: 11px;
}
.bd-button-title {
margin-left: 10px;
}
/* #bd-settings-sidebar .ui-tab-bar-item {
font-size: 16px;
font-weight: 500;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
flex-shrink: 0;
padding: 6px 10px;
border-radius: 3px;
position: relative;
overflow: hidden;
}
#bd-settings-sidebar .ui-tab-bar-item.selected {
cursor: default;
}
.theme-dark #bd-settings-sidebar .ui-tab-bar-item {
color: #b9bbbe;
}
.theme-dark #bd-settings-sidebar .ui-tab-bar-item:hover {
background-color: rgba(185,187,190,.1);
color: #f6f6f7;
}
.theme-dark #bd-settings-sidebar .ui-tab-bar-item.selected {
background-color: #7289da;
color: #fff;
}
.theme-light #bd-settings-sidebar .ui-tab-bar-item {
color: #72767d;
}
.theme-light #bd-settings-sidebar .ui-tab-bar-item:hover {
background-color: rgba(79,84,92,.1);
color: #4f545c;
}
.theme-light #bd-settings-sidebar .ui-tab-bar-item.selected {
background-color: #7289da;
color: #fff;
}
#bd-settings-sidebar .ui-tab-bar-header {
font-size: 12px;
font-weight: 700;
line-height: 16px;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 0;
padding: 6px 10px;
overflow: hidden;
}
.theme-dark #bd-settings-sidebar .ui-tab-bar-header {
color: #72767d;
}
.theme-light #bd-settings-sidebar .ui-tab-bar-header {
color: #b9bbbe;
}
#bd-settings-sidebar .ui-tab-bar-separator {
height: 1px;
margin: 8px 10px;
}
.theme-dark #bd-settings-sidebar .ui-tab-bar-separator {
background-color: rgba(114,118,125,.3);
}
.theme-light #bd-settings-sidebar .ui-tab-bar-separator {
background-color: rgba(185,187,190,.3);
}
.ui-flex {
display: flex;
}
#bd-settingspane-container h2.ui-form-title {
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}
.theme-dark #bd-settingspane-container h2.ui-form-title {
color: #f6f6f7;
}
.theme-light #bd-settingspane-container h2.ui-form-title {
color: #4f545c;
} */
.bd-switch {
background-color: #72767d;
border-radius: 14px;
@ -191,104 +85,6 @@
cursor: not-allowed;
}
.bd-switch-item {
flex-direction: column;
margin-top: 8px;
}
.bd-switch-item h3 {
font-size: 16px;
font-weight: 500;
line-height: 24px;
flex: 1;
}
.theme-dark .bd-switch-item h3 {
color: #f6f6f7;
}
.theme-light .bd-switch-item h3 {
color: #4f545c;
}
/* .ui-switch-item .style-description {
font-size: 14px;
font-weight: 500;
line-height: 20px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid hsla(218,5%,47%,.3);
}
.theme-dark .ui-switch-item .style-description {
color: #72767d;
}
.theme-light .ui-switch-item .style-description {
color: rgba(114,118,125,.6);
} */
.bd-switch-item .bd-switch-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
width: 44px;
height: 24px;
display: block;
flex: 0 0 auto;
}
.bd-switch-item .bd-switch-wrapper input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
}
.bd-switch-item .bd-switch-wrapper .bd-switch {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #72767d;
border-radius: 14px;
transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out;
}
.bd-switch-item .bd-switch-wrapper .bd-switch::before {
content: "";
display: block;
width: 18px;
height: 18px;
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
background: #f6f6f7;
border-radius: 10px;
transition: all 0.15s ease;
box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
}
.bd-switch-item .bd-switch-wrapper .bd-switch.checked {
background: #7289da;
}
.bd-switch-item .bd-switch-wrapper .bd-switch.checked::before {
transform: translateX(20px);
}
#bd-settingspane-container .scroller-wrap {
height: 100%;
}
#bd-settingspane-container .scroller-wrap .scroller {
display: flex;
}
.bd-select-wrapper {
color: var(--text-muted);
font-size: 13px;

2
src/ui/emoteicon.jsx
View File

@ -8,7 +8,7 @@ const {ComponentDispatch} = WebpackModules.getByProps("ComponentDispatch");
export default class EmoteIcon extends React.Component {
render() {
return <div className="emote-container" onClick={this.handleOnClick.bind(this)} onContextMenu={this.handleOnContextMenu.bind(this)}>
return <div className="bd-emote-item" onClick={this.handleOnClick.bind(this)} onContextMenu={this.handleOnContextMenu.bind(this)}>
<img src={this.props.url} alt={this.props.emote} title={this.props.emote}/>
</div>;
}

2
src/ui/icons/downarrow.jsx
View File

@ -3,7 +3,7 @@ import {React} from "modules";
export default class DownArrow extends React.Component {
render() {
const size = this.props.size || "16px";
return <svg className={this.props.className || ""} fill="#FFFFFF" viewBox="0 0 24 24" style={{width: size, height: size}}>
return <svg className={this.props.className || ""} fill="currentColor" viewBox="0 0 24 24" style={{width: size, height: size}}>
<path d="M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"/>
</svg>;
}

2
src/ui/settings/addoncard.jsx
View File

@ -170,7 +170,7 @@ export default class AddonCard extends React.Component {
<div className="bd-title">{this.buildTitle(name, version, {name: author, id: this.props.addon.authorId, link: this.props.addon.authorLink})}</div>
<Switch checked={this.props.enabled} onChange={this.onChange} />
</div>
<div className="bd-description-wrap scroller-wrap fade"><div className="bd-description scroller">{SimpleMarkdown.parseToReact(description)}</div></div>
<div className="bd-description-wrap"><div className="bd-description">{SimpleMarkdown.parseToReact(description)}</div></div>
{this.footer}
</div>;
}