diff --git a/client/src/styles/partials/bdsettings/plugincard.scss b/client/src/styles/partials/bdsettings/plugincard.scss
index 02578185..40f26646 100644
--- a/client/src/styles/partials/bdsettings/plugincard.scss
+++ b/client/src/styles/partials/bdsettings/plugincard.scss
@@ -112,6 +112,7 @@
}
.bd-plugin-settings-body {
+ margin-bottom: 80px;
.bd-setting-switch {
.bd-switch-wrapper {
diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
index ff75926e..a5ad77c2 100644
--- a/client/src/styles/partials/generic/forms.scss
+++ b/client/src/styles/partials/generic/forms.scss
@@ -10,6 +10,12 @@
margin-top: 8px;
margin-bottom: 40px;
background: hsla(218,5%,47%,.3);
+
+ .bd-form-textinput + &,
+ .bd-form-fileinput + &,
+ .bd-setting-switch + & {
+ margin: 0 0 15px 0;
+ }
}
.bd-form-warning {
@@ -52,8 +58,8 @@
user-select: none;
}
-.bd-form-textinput {
-
+.bd-form-textinput,
+.bd-form-fileinput {
.bd-title {
display: flex;
@@ -65,22 +71,6 @@
margin-bottom: 0;
margin-top: 0;
}
-
- input[type="text"] {
- background: transparent;
- border: none;
- color: #b9bbbe;
- border-bottom: 2px solid rgba(114, 118, 126, 0.3);
- outline: none;
- line-height: 24px;
- font-size: 100%;
- font-weight: 500;
-
- &:focus {
- color: #FFF;
- border-color: $colbdblue;
- }
- }
}
.bd-hint {
@@ -88,8 +78,68 @@
color: #72767d;
font-size: 14px;
font-weight: 500;
+ margin-top: 5px;
margin-bottom: 15px;
- line-height: 30px;
+ line-height: 20px;
border-bottom: 0px solid rgba(114, 118, 126, 0.1);
}
-}
\ No newline at end of file
+}
+
+.bd-form-textinput {
+ input[type="text"] {
+ background: transparent;
+ border: none;
+ color: #b9bbbe;
+ border-bottom: 2px solid rgba(114, 118, 126, 0.3);
+ outline: none;
+ line-height: 24px;
+ font-size: 100%;
+ font-weight: 500;
+
+ &:focus {
+ color: #FFF;
+ border-color: $colbdblue;
+ }
+ }
+}
+
+.bd-form-fileinput {
+ .bd-button.bd-button-primary {
+ padding: 3px 8px;
+ border-radius: 3px;
+ font-size: 12px;
+ font-weight: 400;
+ }
+
+ .bd-selected-files {
+ margin: 15px 0;
+
+ .bd-selected-file {
+ margin: 10px 0;
+ color: #aaa;
+ font-size: 15px;
+ display: flex;
+
+ .bd-file-path {
+ flex: 1 1;
+ }
+
+ .bd-file-open,
+ .bd-file-remove {
+ flex: 0 0;
+ margin-left: 5px;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ fill: #ccc;
+
+ &:hover {
+ fill: #fff;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/client/src/ui/components/bd/pluginsetting/File.vue b/client/src/ui/components/bd/pluginsetting/File.vue
new file mode 100644
index 00000000..fe961574
--- /dev/null
+++ b/client/src/ui/components/bd/pluginsetting/File.vue
@@ -0,0 +1,59 @@
+/**
+ * BetterDiscord Plugin Setting File Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+
+ {{ setting.text }}
+
+