Fixes minor UI issues (#496)
* Minimal mode fixes/improvements, fix addon list names wrapping, improvements to secondary card text. * bd-addon-card minimal mode fix * fix a blankstate typo * move noresults to it's own file, add notes for utilclasses, * css cleanup, remove pointless feature, changelog stuff * typo in changelog * editor autoresize with css * forgot to scale that properly * linter issues * add support for inline codeblocks in changelog and card desc * forgot something in the editor * this looks better as tertiary * make bd-button-success consistent, add more button states * change coloring on bd-meta * fix icon in light mode * linter
This commit is contained in:
parent
91c765b853
commit
db84e73f50
|
@ -44,10 +44,6 @@
|
||||||
"name": "Minimaler Modus",
|
"name": "Minimaler Modus",
|
||||||
"note": "Verbirgt Elemente und reduziert die Größe von elementen."
|
"note": "Verbirgt Elemente und reduziert die Größe von elementen."
|
||||||
},
|
},
|
||||||
"hideChannels": {
|
|
||||||
"name": "Kanäle verbergen",
|
|
||||||
"note": "Verbirgt Kanäle, wenn \"Minimaler Modus\" aktiviert ist."
|
|
||||||
},
|
|
||||||
"darkMode": {
|
"darkMode": {
|
||||||
"name": "Dunkelmodus",
|
"name": "Dunkelmodus",
|
||||||
"note": "Aktivert einen noch dunkleren Modus in Discord."
|
"note": "Aktivert einen noch dunkleren Modus in Discord."
|
||||||
|
|
|
@ -44,10 +44,6 @@
|
||||||
"name": "24-Hour Timestamps",
|
"name": "24-Hour Timestamps",
|
||||||
"note": "Converts 12-hour timestamps to 24-hour format"
|
"note": "Converts 12-hour timestamps to 24-hour format"
|
||||||
},
|
},
|
||||||
"hideChannels": {
|
|
||||||
"name": "Hide Channels",
|
|
||||||
"note": "Hides channels when in minimal mode"
|
|
||||||
},
|
|
||||||
"darkMode": {
|
"darkMode": {
|
||||||
"name": "Dark Mode",
|
"name": "Dark Mode",
|
||||||
"note": "Make certain elements dark by default"
|
"note": "Make certain elements dark by default"
|
||||||
|
|
|
@ -44,10 +44,6 @@
|
||||||
"name": "コンパクトモード",
|
"name": "コンパクトモード",
|
||||||
"note": "表示をコンパクトにします。"
|
"note": "表示をコンパクトにします。"
|
||||||
},
|
},
|
||||||
"hideChannels": {
|
|
||||||
"name": "チャンネルリストを非表示",
|
|
||||||
"note": "コンパクトモードのときは、チャンネルリストを表示しません"
|
|
||||||
},
|
|
||||||
"darkMode": {
|
"darkMode": {
|
||||||
"name": "ダークモード",
|
"name": "ダークモード",
|
||||||
"note": "ダークモードを有効にします"
|
"note": "ダークモードを有効にします"
|
||||||
|
|
|
@ -44,10 +44,6 @@
|
||||||
"name": "Minimalt Läge",
|
"name": "Minimalt Läge",
|
||||||
"note": "Gömmer och förminskar komponenter"
|
"note": "Gömmer och förminskar komponenter"
|
||||||
},
|
},
|
||||||
"hideChannels": {
|
|
||||||
"name": "Göm Kanaler",
|
|
||||||
"note": "Gömmer kanaler när minimalt läge är aktiverat"
|
|
||||||
},
|
|
||||||
"darkMode": {
|
"darkMode": {
|
||||||
"name": "Mörkt Läge",
|
"name": "Mörkt Läge",
|
||||||
"note": "Gör vissa komponenter mörka"
|
"note": "Gör vissa komponenter mörka"
|
||||||
|
|
|
@ -4,32 +4,12 @@ export default new class MinimalMode extends Builtin {
|
||||||
get name() {return "MinimalMode";}
|
get name() {return "MinimalMode";}
|
||||||
get category() {return "appearance";}
|
get category() {return "appearance";}
|
||||||
get id() {return "minimalMode";}
|
get id() {return "minimalMode";}
|
||||||
get hideChannelsID() {return "hideChannels";}
|
|
||||||
get hideChannels() {return this.get(this.hideChannelsID);}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.enableHideChannels = this.enableHideChannels.bind(this);
|
|
||||||
this.disableHideChannels = this.disableHideChannels.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
enabled() {
|
enabled() {
|
||||||
document.body.classList.add("bd-minimal");
|
document.body.classList.add("bd-minimal");
|
||||||
if (this.hideChannels) this.enableHideChannels();
|
|
||||||
this.hideChannelCancel = this.registerSetting(this.hideChannelsID, this.enableHideChannels, this.disableHideChannels);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
disabled() {
|
disabled() {
|
||||||
document.body.classList.remove("bd-minimal");
|
document.body.classList.remove("bd-minimal");
|
||||||
if (this.hideChannels) this.disableHideChannels();
|
|
||||||
if (this.hideChannelCancel) this.hideChannelCancel();
|
|
||||||
}
|
|
||||||
|
|
||||||
enableHideChannels() {
|
|
||||||
document.body.classList.add("bd-minimal-chan");
|
|
||||||
}
|
|
||||||
|
|
||||||
disableHideChannels() {
|
|
||||||
document.body.classList.remove("bd-minimal-chan");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
|
@ -1,20 +1,19 @@
|
||||||
export default {
|
export default {
|
||||||
video: "https://i.zackrauen.com/EEM6Nor0XW.mp4",
|
video: "https://cdn.discordapp.com/attachments/769669826120777739/777059779368976394/b0cs2x.mp4",
|
||||||
poster: "https://i.imgur.com/tNGALts.jpeg",
|
poster: "https://i.imgur.com/P50xFON.png",
|
||||||
description: "The rewrite you didn't even know about is finally here.",
|
description: "The rewrite you didn't even know about is finally here.",
|
||||||
changes: [
|
changes: [
|
||||||
{
|
{
|
||||||
title: "What's New?",
|
title: "What's New?",
|
||||||
items: [
|
items: [
|
||||||
"**Everything** is entirely rewritten, for better or worse.",
|
"**Everything** is entirely rewritten, for better or worse.",
|
||||||
"**Emotes and CustomCSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.",
|
"**Emotes and Custom CSS** can be completely turned off for those not interested. It saves on memory too by not loading those components.",
|
||||||
"**Floating editors** for both custom css and plugins/themes are now available. (See video above)",
|
"**Floating editors** for both custom css and plugins/themes are now available.",
|
||||||
"**Ace**, the editor from the previous version, has been replaced with **Monaco** which is the editor used in VSCode.",
|
"**Monaco** is now used as the main CSS editor, in place of Ace.",
|
||||||
"**Settings panels** are completely new and sleek. They are also highly extensible for potential future features :eyes:",
|
"**Settings panels** are completely new and sleek. They are also highly extensible for potential future features :eyes:",
|
||||||
"**Translations** are now integrated starting with only a couple languages, but feel free to contribute your own!",
|
"**Translations** are now integrated starting with only a couple languages, but feel free to contribute your own!",
|
||||||
"**Emote menu** now uses React Patching and properly integrates into the new Emoji Picker. (Thanks Strencher#1044!)",
|
|
||||||
"**Public servers** got a new makeover thanks to some design help from Tropical and Gibbu!",
|
"**Public servers** got a new makeover thanks to some design help from Tropical and Gibbu!",
|
||||||
"We added a setting to **hide the Gif Picker and the Nitro Gift Picker** in the textarea."
|
"We added settings to hide the **Gif Picker** and the **Nitro Gift** buttons in the textarea."
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -26,16 +25,17 @@ export default {
|
||||||
"**General performance** improvements throughout the app, from startup to emotes to addons.",
|
"**General performance** improvements throughout the app, from startup to emotes to addons.",
|
||||||
"**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name.",
|
"**Exporting** by plugins is now highly encouraged over trying to match your meta name and class name.",
|
||||||
"**Plugins and Themes** pages have more options for sorting, views and more. The entire panel got a facelift!",
|
"**Plugins and Themes** pages have more options for sorting, views and more. The entire panel got a facelift!",
|
||||||
"**Blankslates** have been added all over for that added UX."
|
"**Blankslates** have been added all over for that added UX.",
|
||||||
|
"**Several unused UI features** have been removed for a more performant and usable experience.",
|
||||||
|
"**Debugger Hotkey** is now a built-in feature!"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Fixes",
|
title: "Fixes",
|
||||||
type: "fixed",
|
type: "fixed",
|
||||||
items: [
|
items: [
|
||||||
"There are a lot of little issues that this rewrite fixes.",
|
"**Minimal mode** has been redesigned from the ground up and now works as intended.",
|
||||||
"I forgot to write them down",
|
"**Emote menus** are fixed and now use React Patching to properly integrate into the new Emoji Picker. (Thanks Strencher#1044!)"
|
||||||
"But I'm sure many more will be found soon"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -21,7 +21,6 @@ export default [
|
||||||
{type: "switch", id: "hideGIFButton", value: false},
|
{type: "switch", id: "hideGIFButton", value: false},
|
||||||
{type: "switch", id: "voiceMode", value: false},
|
{type: "switch", id: "voiceMode", value: false},
|
||||||
{type: "switch", id: "minimalMode", value: false},
|
{type: "switch", id: "minimalMode", value: false},
|
||||||
{type: "switch", id: "hideChannels", value: false, enableWith: "minimalMode"},
|
|
||||||
{type: "switch", id: "darkMode", value: false},
|
{type: "switch", id: "darkMode", value: false},
|
||||||
{type: "switch", id: "coloredText", value: false}
|
{type: "switch", id: "coloredText", value: false}
|
||||||
]
|
]
|
||||||
|
|
|
@ -44,10 +44,6 @@ export default {
|
||||||
name: "24-Hour Timestamps",
|
name: "24-Hour Timestamps",
|
||||||
note: "Converts 12-hour timestamps to 24-hour format"
|
note: "Converts 12-hour timestamps to 24-hour format"
|
||||||
},
|
},
|
||||||
hideChannels: {
|
|
||||||
name: "Hide Channels",
|
|
||||||
note: "Hides channels when in minimal mode"
|
|
||||||
},
|
|
||||||
darkMode: {
|
darkMode: {
|
||||||
name: "Dark Mode",
|
name: "Dark Mode",
|
||||||
note: "Make certain elements dark by default"
|
note: "Make certain elements dark by default"
|
||||||
|
@ -231,7 +227,7 @@ export default {
|
||||||
metaNotFound: "META was not found.",
|
metaNotFound: "META was not found.",
|
||||||
compileError: "Could not be compiled.",
|
compileError: "Could not be compiled.",
|
||||||
wasUnloaded: "{{name}} was unloaded.",
|
wasUnloaded: "{{name}} was unloaded.",
|
||||||
blankSlateHeader: "You don't have any {{type}}!",
|
blankSlateHeader: "You don't have any {{type}}s!",
|
||||||
blankSlateMessage: "Grab some from [this website]({{link}}) and add them to your {{type}} folder."
|
blankSlateMessage: "Grab some from [this website]({{link}}) and add them to your {{type}} folder."
|
||||||
},
|
},
|
||||||
CustomCSS: {
|
CustomCSS: {
|
||||||
|
|
|
@ -151,4 +151,23 @@ export default new class ComponentPatcher {
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// as part of utility classes, i would like a way to distinguish channel types from the .content-3at_AU element. other than that, can't think of anything
|
// as part of utility classes, i would like a way to distinguish channel types from the .content-3at_AU element. other than that, can't think of anything
|
||||||
|
|
||||||
|
// Tropical's notes
|
||||||
|
|
||||||
|
/*
|
||||||
|
html [maximized | bd]
|
||||||
|
.iconWrapper-2OrFZ1 [type]
|
||||||
|
.sidebar-2K8pFh [guild-id]
|
||||||
|
.wrapper-2jXpOf [voice | text | announcement | store | private | nsfw]
|
||||||
|
.chat-3bRxxu [channnel | guild-id]
|
||||||
|
.listItem-2P_4kh [type | state]
|
||||||
|
.privateChannels-1nO12o [library-hidden]
|
||||||
|
.member-3-YXUe [user-id]
|
||||||
|
.message-2qnXI6 [type | author-id | group-end]
|
||||||
|
.wrapper-3t9DeA [user-id | status]
|
||||||
|
.userPopout-3XzG_A [state | user-id]
|
||||||
|
.root-SR8cQa [state | user-id]
|
||||||
|
.contentRegion-3nDuYy [settings-page]
|
||||||
|
.item-PXvHYJ [settings-page]
|
||||||
|
*/
|
|
@ -59,7 +59,7 @@ export default new class DataStore {
|
||||||
const oldSettings = channelData.settings;
|
const oldSettings = channelData.settings;
|
||||||
const newSettings = {
|
const newSettings = {
|
||||||
general: {publicServers: oldSettings["bda-gs-1"], voiceDisconnect: oldSettings["bda-dc-0"], classNormalizer: oldSettings["fork-ps-4"], showToasts: oldSettings["fork-ps-2"]},
|
general: {publicServers: oldSettings["bda-gs-1"], voiceDisconnect: oldSettings["bda-dc-0"], classNormalizer: oldSettings["fork-ps-4"], showToasts: oldSettings["fork-ps-2"]},
|
||||||
appearance: {twentyFourHour: oldSettings["bda-gs-6"], voiceMode: oldSettings["bda-gs-4"], minimalMode: oldSettings["bda-gs-2"], hideChannels: oldSettings["bda-gs-3"], darkMode: oldSettings["bda-gs-5"], coloredText: oldSettings["bda-gs-7"]},
|
appearance: {twentyFourHour: oldSettings["bda-gs-6"], voiceMode: oldSettings["bda-gs-4"], minimalMode: oldSettings["bda-gs-2"], darkMode: oldSettings["bda-gs-5"], coloredText: oldSettings["bda-gs-7"]},
|
||||||
addons: {addonErrors: oldSettings["fork-ps-1"], autoReload: oldSettings["fork-ps-5"]},
|
addons: {addonErrors: oldSettings["fork-ps-1"], autoReload: oldSettings["fork-ps-5"]},
|
||||||
developer: {debuggerHotkey: oldSettings["bda-gs-8"], copySelector: oldSettings["fork-dm-1"], reactDevTools: oldSettings.reactDevTools}
|
developer: {debuggerHotkey: oldSettings["bda-gs-8"], copySelector: oldSettings["fork-dm-1"], reactDevTools: oldSettings.reactDevTools}
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
.bd-empty-results {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--text-normal);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-empty-results-text {
|
||||||
|
width: 280px;
|
||||||
|
margin-top: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
|
@ -43,45 +43,13 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor,
|
.editor {
|
||||||
.ace_editor {
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: calc(100vh - 250px);
|
height: calc(100vh - 250px);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-monokai .editor .ace_gutter {
|
|
||||||
background: var(--background-secondary-alt);
|
|
||||||
color: var(--header-secondary);
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-monokai .ace_editor {
|
|
||||||
background: var(--background-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-monokai .ace_line {
|
|
||||||
color: var(--text-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-wrapper .bd-monokai .ace_cursor {
|
|
||||||
color: var(--text-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-wrapper .bd-monokai .ace_gutter-active-line {
|
|
||||||
background: var(--background-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-wrapper .bd-monokai .ace_marker-layer .ace_active-line {
|
|
||||||
background: var(--background-secondary-alt);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-wrapper .bd-monokai .ace_marker-layer .ace_selection {
|
|
||||||
background: #3e82e5;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls-section {
|
.controls-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -102,45 +70,31 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ace Editor Settings */
|
.monaco-editor:not(.rename-box),
|
||||||
#ace_settingsmenu_container {
|
.monaco-editor .overflow-guard,
|
||||||
background: rgba(0, 0, 0, 0.7) !important; /* stylelint-disable-line important */
|
.monaco-editor .editor-scrollable,
|
||||||
|
.monaco-editor .minimap-shadow-visible,
|
||||||
|
.monaco-editor .decorationsOverviewRuler {
|
||||||
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body #ace_settingsmenu {
|
.monaco-editor:not(.rename-box),
|
||||||
padding-top: 35px;
|
.monaco-editor .overflow-guard,
|
||||||
|
.monaco-editor .overlayWidgets,
|
||||||
|
#bd-customcss-editor > div > .overflow-guard > div:nth-child(3) {
|
||||||
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ace_closeButton {
|
.monaco-editor .minimap {
|
||||||
position: absolute;
|
right: 14px;
|
||||||
top: 8px;
|
left: unset !important;
|
||||||
right: 12px;
|
height: 100% !important;
|
||||||
z-index: 10000;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ace_closeButton::before {
|
.monaco-editor .editor-scrollable {
|
||||||
content: "✖";
|
width: calc(100% - 64px) !important;
|
||||||
color: #36393f;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ace_closeButton:active {
|
.monaco-editor .view-overlays .current-line {
|
||||||
transform: translateY(2px);
|
width: 1e+06px !important;
|
||||||
}
|
|
||||||
|
|
||||||
/* editor help text */
|
|
||||||
#bd-editor-controls .help-text {
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bd-editor-controls .help-text .inline {
|
|
||||||
background: #2f3129;
|
|
||||||
padding: 0.2em;
|
|
||||||
margin: -0.2em 0;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
|
@ -126,22 +126,4 @@
|
||||||
.bd-dark .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3 {
|
.bd-dark .regionSelectModal-12e-57 .regionSelectModalOption-2DSIZ3 {
|
||||||
background: #2f3136;
|
background: #2f3136;
|
||||||
border: 2px solid #484b52;
|
border: 2px solid #484b52;
|
||||||
}
|
|
||||||
|
|
||||||
/* Ace Editor Settings */
|
|
||||||
.bd-dark ~ div #ace_settingsmenu {
|
|
||||||
color: #f6f6f7;
|
|
||||||
background: #36393f;
|
|
||||||
box-shadow: 0 0 0 1px rgba(32, 34, 37, 0.6), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-dark ~ div #ace_settingsmenu select,
|
|
||||||
.bd-dark ~ div #ace_settingsmenu input[type="text"] {
|
|
||||||
color: #f6f6f7;
|
|
||||||
background: #2f3136;
|
|
||||||
border: 1px solid #484b52;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-dark ~ div .ace_closeButton::before {
|
|
||||||
color: #f6f6f7;
|
|
||||||
}
|
}
|
|
@ -4,7 +4,7 @@
|
||||||
.bd-minimal .members-1998pB,
|
.bd-minimal .members-1998pB,
|
||||||
.bd-minimal .membersWrap-2h-GB4,
|
.bd-minimal .membersWrap-2h-GB4,
|
||||||
.bd-minimal .nowPlayingColumn-2sl4cE,
|
.bd-minimal .nowPlayingColumn-2sl4cE,
|
||||||
.bd-minimal .bannerImage-1jOskm {
|
.bd-minimal .bannerImage-3KhIJ6 {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
}
|
}
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
/* Header container heights */
|
/* Header container heights */
|
||||||
|
|
||||||
.bd-minimal .container-1r6BKw,
|
.bd-minimal .container-1r6BKw,
|
||||||
.bd-minimal .header-2o-2hj,
|
.bd-minimal .header-2V-4Sw,
|
||||||
.bd-minimal .searchBar-6Kv8R2 {
|
.bd-minimal .searchBar-6Kv8R2 {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
@ -57,7 +57,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-minimal .bd-addon-list .bd-addon-card {
|
.bd-minimal .bd-addon-list .bd-addon-card {
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -159,6 +158,17 @@
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Messages */
|
||||||
|
|
||||||
|
.bd-minimal .cozy-3raOZG.wrapper-2a6GCs .avatar-1BDn8e {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-minimal .cozy-3raOZG.wrapper-2a6GCs {
|
||||||
|
padding-left: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Chat input */
|
/* Chat input */
|
||||||
|
|
||||||
.bd-minimal .form-2fGMdU {
|
.bd-minimal .form-2fGMdU {
|
||||||
|
@ -249,4 +259,4 @@
|
||||||
|
|
||||||
.bd-minimal .layout-2DM8Md {
|
.bd-minimal .layout-2DM8Md {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -48,18 +48,6 @@
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-empty-results {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--text-normal);
|
|
||||||
margin-top: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-empty-results svg {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-card-list {
|
.bd-card-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 16px;
|
grid-gap: 16px;
|
||||||
|
|
|
@ -18,15 +18,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-button.bd-button-success {
|
.bd-button.bd-button-success {
|
||||||
background-color: #3ac15c;
|
background-color: #43b581;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-button.bd-button-success:hover {
|
.bd-button.bd-button-success:hover {
|
||||||
background-color: rgb(52, 174, 83);
|
background-color: #3ca374;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-button.bd-button-success:active {
|
.bd-button.bd-button-success:active {
|
||||||
background-color: rgb(46, 154, 74);
|
background-color: #369167;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-button.bd-button-warning {
|
||||||
|
background-color: #faa61a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-button.bd-button-warning:hover {
|
||||||
|
background-color: #e19517;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-button.bd-button-warning:active {
|
||||||
|
background-color: #c88515;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-button.bd-button-danger {
|
.bd-button.bd-button-danger {
|
||||||
|
|
|
@ -19,12 +19,23 @@
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-changelog-modal video {
|
.bd-changelog-modal video,
|
||||||
|
.bd-changelog-modal img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-changelog-modal code.inline {
|
||||||
|
padding: 0.2em;
|
||||||
|
margin: -0.2em 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background: var(--background-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
.bd-link {
|
.bd-link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -60,20 +60,30 @@
|
||||||
|
|
||||||
.bd-addon-header .bd-icon {
|
.bd-addon-header .bd-icon {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
fill: var(--header-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-title,
|
.bd-title,
|
||||||
.bd-name,
|
.bd-name,
|
||||||
.bd-meta {
|
.bd-meta {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-title {
|
.bd-title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-meta {
|
.bd-meta {
|
||||||
color: var(--text-muted);
|
color: var(--channels-default);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-name {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-name::after,
|
.bd-name::after,
|
||||||
|
@ -112,6 +122,16 @@
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-description code {
|
||||||
|
padding: 0.2em;
|
||||||
|
margin: -0.2em 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 85%;
|
||||||
|
line-height: 1.125rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background: var(--background-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
.bd-addon-list .scroller::-webkit-scrollbar-track-piece,
|
.bd-addon-list .scroller::-webkit-scrollbar-track-piece,
|
||||||
.bd-addon-list .scroller::-webkit-scrollbar-thumb {
|
.bd-addon-list .scroller::-webkit-scrollbar-thumb {
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
|
|
|
@ -5,7 +5,9 @@ export default class NoResults extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return <div className={"bd-empty-results" + (this.props.className ? ` ${this.props.className}` : "")}>
|
return <div className={"bd-empty-results" + (this.props.className ? ` ${this.props.className}` : "")}>
|
||||||
<MagnifyingGlass />
|
<MagnifyingGlass />
|
||||||
{DiscordModules.Strings.SEARCH_NO_RESULTS || ""}
|
<div className="bd-empty-results-text">
|
||||||
|
{DiscordModules.Strings.SEARCH_NO_RESULTS || ""}
|
||||||
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -180,7 +180,7 @@ export default class Modals {
|
||||||
const MarkdownParser = WebpackModules.getByProps("defaultRules", "parse");
|
const MarkdownParser = WebpackModules.getByProps("defaultRules", "parse");
|
||||||
if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return Logger.warn("Modals", "showChangelogModal missing modules");
|
if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return Logger.warn("Modals", "showChangelogModal missing modules");
|
||||||
|
|
||||||
const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.bdVersion}`, footer} = options;
|
const {image = "https://i.imgur.com/8sctUVV.png", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.bdVersion}`, footer} = options;
|
||||||
const ce = React.createElement;
|
const ce = React.createElement;
|
||||||
const changelogItems = [options.video ? ce("video", {src: options.video, poster: options.poster, controls: true, className: ChangelogClasses.video}) : ce("img", {src: image})];
|
const changelogItems = [options.video ? ce("video", {src: options.video, poster: options.poster, controls: true, className: ChangelogClasses.video}) : ce("img", {src: image})];
|
||||||
if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
|
if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
|
||||||
|
|
Loading…
Reference in New Issue