diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss index dd610d66..4c4d77c5 100644 --- a/client/src/styles/partials/generic/forms.scss +++ b/client/src/styles/partials/generic/forms.scss @@ -96,6 +96,7 @@ .bd-form-textinput, .bd-form-fileinput, +.bd-form-numberinput, .bd-setting-switch { .bd-title { display: flex; @@ -121,8 +122,8 @@ } } -.bd-form-textinput { - input[type="text"] { +.bd-form-textinput, .bd-form-numberinput { + input[type="text"], input[type="number"] { background: transparent; border: none; color: #b9bbbe; @@ -179,3 +180,158 @@ } } } + +.bd-number { + position: relative; + + input[type=number] { + &::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + } + + .bd-number-spinner { + position: absolute; + top: 0; + right: 0; + height: 100%; + justify-content: space-around; + + .bd-arrow { + padding: 3px 5px; + cursor: pointer; + font-size: 0; + + .bd-up-arrow { + border-color: transparent transparent rgb(153, 153, 153); + border-style: solid; + border-width: 2.5px 5px 5px; + } + + &:hover .bd-up-arrow { + border-color: transparent transparent rgb(200, 200, 200); + } + + .bd-down-arrow { + border-color: rgb(153, 153, 153) transparent transparent; + border-style: solid; + border-width: 5px 5px 2.5px; + } + + &:hover .bd-down-arrow { + border-color: rgb(200, 200, 200) transparent transparent; + } + } + } +} + +.bd-radio-option { + background: rgb(50, 50, 50); + border: 2px solid rgb(39, 39, 39); + border-radius: 5px; + padding: 3px; + align-items: center; + cursor: pointer; + + input[type="radio"] { + display: none; + + &:checked + .bd-radio { + background-color: white; + } + } + + .bd-radio { + background: rgb(50, 50, 50); + border: 1px solid rgb(114, 118, 125); + border-radius: 50%; + width: 12px; + height: 12px; + transition: background-color .1s; + } + + span { + color: white; + margin: 0px 5px; + } + + &:not(:last-child) { + margin-bottom: 5px; + } +} + +.bd-dropdown { + position: relative; + + .bd-dropdown-current { + color: white; + background: rgb(50, 50, 50); + border: 2px solid rgb(39, 39, 39); + border-radius: 5px; + padding: 8px; + cursor: pointer; + + .bd-dropdown-arrow { + border-color: rgb(153, 153, 153) transparent transparent; + border-style: solid; + border-width: 5px 5px 2.5px; + display: inline-block; + margin-left: 10px; + } + } + + .bd-dropdown-options { + position: absolute; + top: calc(100% - 2.5px); + width: 100%; + max-height: 100px; + box-sizing: border-box; + background: rgb(50, 50, 50); + border: 2px solid rgb(39, 39, 39); + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + overflow-y: scroll; + + div { + color: white; + padding: 5px; + cursor: pointer; + + &:hover { + background: rgb(59, 59, 59); + } + + &:last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + } + + &::-webkit-scrollbar { + width: 14px; + } + + &::-webkit-scrollbar-thumb { + background-color: #1e2124; + border-color: #36393e; + border-color: transparent; + } + + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-track-piece { + background-clip: padding-box; + border-width: 3px; + border-style: solid; + border-radius: 7px; + border-color: transparent; + } + + &::-webkit-scrollbar-track-piece { + background-color: #2f3136; + border-color: #36393e; + border-color: transparent; + } + } +} \ No newline at end of file diff --git a/client/src/ui/components/bd/pluginsetting/Dropdown.vue b/client/src/ui/components/bd/pluginsetting/Dropdown.vue new file mode 100644 index 00000000..e0ca6dc5 --- /dev/null +++ b/client/src/ui/components/bd/pluginsetting/Dropdown.vue @@ -0,0 +1,51 @@ +/** + * BetterDiscord Plugin Setting Dropdown 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. +*/ + + + \ No newline at end of file diff --git a/client/src/ui/components/bd/pluginsetting/Number.vue b/client/src/ui/components/bd/pluginsetting/Number.vue new file mode 100644 index 00000000..ccde51a2 --- /dev/null +++ b/client/src/ui/components/bd/pluginsetting/Number.vue @@ -0,0 +1,42 @@ +/** + * BetterDiscord Plugin Setting Number 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. +*/ + + + diff --git a/client/src/ui/components/bd/pluginsetting/PluginSetting.vue b/client/src/ui/components/bd/pluginsetting/PluginSetting.vue index cecd8de3..b79b2307 100644 --- a/client/src/ui/components/bd/pluginsetting/PluginSetting.vue +++ b/client/src/ui/components/bd/pluginsetting/PluginSetting.vue @@ -11,6 +11,9 @@