commit
f9cd4e1a8a
|
@ -1,8 +1,8 @@
|
|||
export { Global } from './global';
|
||||
export { Logger, Utils, FileUtils } from './utils';
|
||||
export { PluginManager } from './pluginmanager';
|
||||
export { Pluging } from './plugin';
|
||||
export { BDIpc } from './bdipc';
|
||||
export { WebpackModules } from './webpackmodules';
|
||||
export { Events } from './events';
|
||||
export { SocketProxy } from './discordsocket';
|
||||
export { Global } from './core/global';
|
||||
export { Logger, Utils, FileUtils } from './core/utils';
|
||||
export { PluginManager } from './core/pluginmanager';
|
||||
export { Pluging } from './core/plugin';
|
||||
export { BDIpc } from './core/bdipc';
|
||||
export { WebpackModules } from './core/webpackmodules';
|
||||
export { Events } from './core/events';
|
||||
export { SocketProxy } from './core/discordsocket';
|
|
@ -0,0 +1,73 @@
|
|||
<template src="./templates/BdSettings.html"></template>
|
||||
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
|
||||
import { CoreSettings, UISettings, EmoteSettings, PluginsView } from './bd';
|
||||
const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings, PluginsView };
|
||||
|
||||
/*Constants*/
|
||||
const sidebarItems = [
|
||||
{ text: 'Internal', _type: 'header' },
|
||||
{ id: 0, contentid: "core", text: 'Core', active: false, _type: 'button' },
|
||||
{ id: 1, contentid: "ui", text: 'UI', active: false, _type: 'button' },
|
||||
{ id: 2, contentid: "emotes", text: 'Emotes', active: false, _type: 'button' },
|
||||
{ id: 3, contentid: "css", text: 'CSS Editor', active: false, _type: 'button' },
|
||||
{ text: 'External', _type: 'header' },
|
||||
{ id: 4, contentid: "plugins", text: 'Plugins', active: false, _type: 'button' },
|
||||
{ id: 5, contentid: "themes", text: 'Themes', active: false, _type: 'button' }
|
||||
];
|
||||
|
||||
/*Methods*/
|
||||
function itemOnClick(id) {
|
||||
if (this.animating || id === this.activeIndex) return;
|
||||
if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
|
||||
this.sidebarItems.find(item => item.id === id).active = true;
|
||||
this.animating = true;
|
||||
this.lastActiveIndex = this.activeIndex;
|
||||
this.activeIndex = id;
|
||||
|
||||
if (this.first) {
|
||||
this.first = false;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.animating = false;
|
||||
this.lastActiveIndex = -1;
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function animatingContent(s) {
|
||||
const item = this.sidebarItems.find(item => item.contentid === s);
|
||||
if (!item) return false;
|
||||
return item.id === this.lastActiveIndex;
|
||||
}
|
||||
|
||||
function activeContent(s) {
|
||||
const item = this.sidebarItems.find(item => item.contentid === s);
|
||||
if (!item) return false;
|
||||
return item.id === this.activeIndex;
|
||||
}
|
||||
|
||||
const methods = { itemOnClick, animatingContent, activeContent };
|
||||
|
||||
export default {
|
||||
components,
|
||||
props: ['active', 'close'],
|
||||
methods,
|
||||
data() {
|
||||
return {
|
||||
sidebarItems,
|
||||
activeIndex: -1,
|
||||
lastActiveIndex: -1,
|
||||
animating: false,
|
||||
first: true
|
||||
}
|
||||
},
|
||||
updated: function () {
|
||||
if (this.active) return;
|
||||
this.activeIndex = this.lastActiveIndex = -1;
|
||||
this.sidebarItems.forEach(item => item.active = false);
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,26 @@
|
|||
<template src="./templates/BdSettingsWrapper.html"></template>
|
||||
<script>
|
||||
/*Imports*/
|
||||
import BdSettings from './BdSettings.vue';
|
||||
const components = { BdSettings };
|
||||
|
||||
/*Methods*/
|
||||
function showSettings() { this.active = true; }
|
||||
function hideSettings() { this.active = false; }
|
||||
|
||||
const methods = { showSettings, hideSettings };
|
||||
|
||||
export default {
|
||||
components,
|
||||
methods,
|
||||
data() {
|
||||
return { active: false }
|
||||
},
|
||||
created: function() {
|
||||
window.addEventListener('keyup', e => {
|
||||
if (e.which !== 27) return;
|
||||
this.hideSettings();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<SettingsWrapper headertext="Core Settings">
|
||||
</SettingsWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { SettingsWrapper } from './';
|
||||
const components = { SettingsWrapper };
|
||||
|
||||
export default {
|
||||
components
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<SettingsWrapper headertext="Emote Settings">
|
||||
</SettingsWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { SettingsWrapper } from './';
|
||||
const components = { SettingsWrapper };
|
||||
|
||||
export default {
|
||||
components
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,9 @@
|
|||
<template src="./templates/PluginCard.html"></template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: ['plugin'],
|
||||
name: "PluginCard"
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,36 @@
|
|||
<template src="./templates/PluginsView.html"></template>
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { SettingsWrapper } from './';
|
||||
import PluginCard from './PluginCard.vue';
|
||||
const components = { SettingsWrapper, PluginCard };
|
||||
|
||||
/*Variables*/
|
||||
let dummyPlugins = [
|
||||
{ "id": 0, "name": "Dummy Plugin 1", "authors": ["Jiiks"], "version": "1.0", "description": "Dummy Plugin 1 Description" },
|
||||
{ "id": 1, "name": "Dummy Plugin 2", "authors": ["Jiiks", "SomeoneElse"], "version": "1.0", "description": "Dummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 Description" }
|
||||
];
|
||||
|
||||
/*Methods*/
|
||||
|
||||
function showLocal() {
|
||||
this.local = true;
|
||||
}
|
||||
|
||||
function showOnline() {
|
||||
this.local = false;
|
||||
}
|
||||
|
||||
const methods = { showLocal, showOnline };
|
||||
|
||||
export default {
|
||||
components,
|
||||
data() {
|
||||
return {
|
||||
localPlugins: dummyPlugins,
|
||||
local: true
|
||||
}
|
||||
},
|
||||
methods
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,11 @@
|
|||
<template src="./templates/SettingsWrapper.html"></template>
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { ScrollerWrap } from '../generic';
|
||||
const components = { ScrollerWrap };
|
||||
|
||||
export default {
|
||||
components,
|
||||
props: ['headertext']
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<SettingsWrapper headertext="UI Settings">
|
||||
</SettingsWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { SettingsWrapper } from './';
|
||||
const components = { SettingsWrapper };
|
||||
|
||||
export default {
|
||||
components
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,6 @@
|
|||
export { default as SettingsWrapper } from './SettingsWrapper.vue';
|
||||
export { default as CoreSettings } from './CoreSettings.vue';
|
||||
export { default as UISettings } from './UISettings.vue';
|
||||
export { default as EmoteSettings } from './EmoteSettings.vue';
|
||||
export { default as PluginsView } from './PluginsView.vue';
|
||||
export { default as PluginCard } from './PluginCard.vue';
|
|
@ -0,0 +1,17 @@
|
|||
<div class="bd-plugin-card">
|
||||
<div class="bd-plugin-header">
|
||||
<span>{{plugin.name}}</span>
|
||||
<div class="bd-flex-spacer"/>
|
||||
<label class="bd-switch-wrapper">
|
||||
<input type="checkbox" class="bd-switch-checkbox" />
|
||||
<div class="bd-switch"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="bd-plugin-body">
|
||||
<div class="bd-plugin-description">{{plugin.description}}</div>
|
||||
<div class="bd-plugin-footer">
|
||||
<div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
|
||||
<div class="bd-controls"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,15 @@
|
|||
<SettingsWrapper headertext="Plugins">
|
||||
<div class="bd-flex bd-flex-col bd-pluginsView">
|
||||
<div class="bd-flex">
|
||||
<div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
|
||||
<h3>Local</h3>
|
||||
</div>
|
||||
<div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
|
||||
<h3>Online</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">
|
||||
<PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id"/>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsWrapper>
|
|
@ -0,0 +1,8 @@
|
|||
<div class="bd-settingsWrap">
|
||||
<div class="bd-settingsWrap-header">{{headertext}}</div>
|
||||
<ScrollerWrap>
|
||||
<div class="bd-scroller">
|
||||
<slot/>
|
||||
</div>
|
||||
</ScrollerWrap>
|
||||
</div>
|
|
@ -0,0 +1,2 @@
|
|||
<template src="./templates/ScrollerWrap.html"></template>
|
||||
<script>export default { props: ['dark'] }</script>
|
|
@ -0,0 +1 @@
|
|||
export { default as ScrollerWrap } from './ScrollerWrap.vue';
|
|
@ -0,0 +1,3 @@
|
|||
<div class="bd-scroller-wrap" :class="{'bd-dark': dark}">
|
||||
<slot/>
|
||||
</div>
|
|
@ -0,0 +1,6 @@
|
|||
<template src="./templates/Button.html"></template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['item', 'onClick']
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,2 @@
|
|||
<template src="./templates/ContentColumn.html"></template>
|
||||
<script> export default { }</script>
|
|
@ -0,0 +1,6 @@
|
|||
<template src="./templates/Header.html"></template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['item']
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,11 @@
|
|||
<template src="./templates/Item.html"></template>
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { SidebarHeader, SidebarButton } from './';
|
||||
const components = { SidebarHeader, SidebarButton };
|
||||
|
||||
export default {
|
||||
components,
|
||||
props: ['item', 'onClick']
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,2 @@
|
|||
<template src="./templates/Sidebar.html"></template>
|
||||
<script> export default { }</script>
|
|
@ -0,0 +1,11 @@
|
|||
<template src="./templates/View.html"></template>
|
||||
<script>
|
||||
/*Imports*/
|
||||
import { ScrollerWrap } from '../generic';
|
||||
const components = { ScrollerWrap };
|
||||
|
||||
export default {
|
||||
components,
|
||||
props: ['contentVisible', 'animating']
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,6 @@
|
|||
export { default as SidebarView } from './View.vue';
|
||||
export { default as Sidebar } from './Sidebar.vue';
|
||||
export { default as SidebarHeader } from './Header.vue';
|
||||
export { default as SidebarButton } from './Button.vue';
|
||||
export { default as SidebarItem } from './Item.vue';
|
||||
export { default as ContentColumn } from './ContentColumn.vue';
|
|
@ -0,0 +1 @@
|
|||
<div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">{{item.text}}</div>
|
|
@ -0,0 +1,3 @@
|
|||
<div class="bd-content bd-content-column">
|
||||
<slot />
|
||||
</div>
|
|
@ -0,0 +1 @@
|
|||
<div class='bd-header'>{{item.text}}</div>
|
|
@ -0,0 +1,2 @@
|
|||
<SidebarButton v-if="item._type == 'button'" :item="item" :onClick="onClick" />
|
||||
<SidebarHeader v-else-if="item._type == 'header'" :item="item" />
|
|
@ -0,0 +1,3 @@
|
|||
<div class="bd-sidebar bd-scroller">
|
||||
<slot/>
|
||||
</div>
|
|
@ -0,0 +1,12 @@
|
|||
<div class="bd-sidebar-view" :class="{active: contentVisible, animating: animating}">
|
||||
<div class="bd-sidebar-region">
|
||||
<div class="bd-settingsWrap">
|
||||
<ScrollerWrap dark="true">
|
||||
<slot name="sidebar"/>
|
||||
</ScrollerWrap>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-content-region">
|
||||
<slot name="content"/>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,26 @@
|
|||
<div class="bd-settings" :class="{active: active}" @keyup="close">
|
||||
<SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
|
||||
<Sidebar slot="sidebar">
|
||||
<div class="bd-settings-x" @click="close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
|
||||
<span>ESC</span>
|
||||
</div>
|
||||
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
|
||||
</Sidebar>
|
||||
<ContentColumn slot="content">
|
||||
<div :class="{active: activeContent('core'), animating: animatingContent('core')}">
|
||||
<CoreSettings />
|
||||
</div>
|
||||
<div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
|
||||
<UISettings />
|
||||
</div>
|
||||
<div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
|
||||
<EmoteSettings />
|
||||
</div>
|
||||
<div :class="{active: activeContent('plugins'), animating: animatingContent('plugins')}">
|
||||
<PluginsView />
|
||||
</div>
|
||||
</ContentColumn>
|
||||
|
||||
</SidebarView>
|
||||
</div>
|
|
@ -0,0 +1,6 @@
|
|||
<div class="bd-settings-wrapper" :class="{active: active}">
|
||||
<div class="bd-settings-button" :class="{active: active}" @click="showSettings">
|
||||
<div class="bd-settings-button-btn"></div>
|
||||
</div>
|
||||
<BdSettings :active="active" :close="hideSettings"/>
|
||||
</div>
|
|
@ -11,19 +11,18 @@
|
|||
const $ = require('jquery');
|
||||
const Vue = require('vue');
|
||||
|
||||
const BdButton = (require('./components/bdbutton.vue')).default;
|
||||
const BdSettingsWrapper = (require('./vue/components/BdSettingsWrapper.vue')).default;
|
||||
class UI {
|
||||
|
||||
constructor() {
|
||||
$('body').append($('<div/>', {
|
||||
class: 'bd-settingsbutton',
|
||||
id: 'bd-settingsbutton'
|
||||
}));
|
||||
$('body').append($('<bdbody/>').append($('<div/>', {
|
||||
id: 'bd-settings'
|
||||
})));
|
||||
|
||||
this.vueInstance = new Vue.default({
|
||||
el: '#bd-settingsbutton',
|
||||
template: '<BdButton/>',
|
||||
components: { BdButton }
|
||||
el: '#bd-settings',
|
||||
template: '<BdSettingsWrapper/>',
|
||||
components: { BdSettingsWrapper }
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,70 @@
|
|||
@keyframes bd-slidein {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-slideout {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-slideoutin {
|
||||
0% {
|
||||
transform: translateX(-10%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-10%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
|
@ -1,3 +1,38 @@
|
|||
@import './plugincard.scss';
|
||||
|
||||
.bd-pluginsView {
|
||||
.bd-button {
|
||||
text-align: center;
|
||||
|
||||
|
||||
h3 {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
font-size: 1.17em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.bd-active {
|
||||
color: #fff;
|
||||
background: rgb(62, 130, 229);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings-button {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
@ -9,26 +44,8 @@
|
|||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06);
|
||||
opacity: 1;
|
||||
|
||||
&.active {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
z-index: 90000;
|
||||
|
||||
.bd-settings-button-btn {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 20px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings-button-btn {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
background-image: $logoSmallBw;
|
||||
background-size: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
@ -46,13 +63,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
&settigns {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
&.active {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
z-index: 90000;
|
||||
width: 200px;
|
||||
|
||||
.bd-settings-button-btn {
|
||||
background-image: $logoBigBw;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 20px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -69,6 +95,34 @@
|
|||
|
||||
&.active {
|
||||
width: 900px;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bd-settings-x {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 250px;
|
||||
border: 2px solid #6e6e6e;
|
||||
border-radius: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
color: #72767d;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(218,5%,47%,.3);
|
||||
}
|
||||
}
|
||||
|
||||
.platform-darwin & {
|
||||
|
@ -78,13 +132,5 @@
|
|||
.bd-sidebar-view .bd-content-region {
|
||||
padding-top: 22px;
|
||||
}
|
||||
.bd-settings-x {
|
||||
top: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings.active {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
$colbdblue: #3e82e5;
|
||||
$colerr: #d84040;
|
||||
$colwarn: #faa61a;
|
||||
$colok: #43b581;
|
||||
$coldimwhite: #b9bbbe;
|
|
@ -1,23 +0,0 @@
|
|||
/*Some Discord overrides*/
|
||||
.guilds-wrapper {
|
||||
padding-top: 50px !important;
|
||||
}
|
||||
|
||||
[class*="guilds-wrapper"] + [class*="flex"] {
|
||||
border-radius: 0 0 0 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
-moz-appearance: scrollbartrack-vertical;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.guilds-wrapper .unread-mentions-indicator-top {
|
||||
top: 50px;
|
||||
}
|
|
@ -0,0 +1,11 @@
|
|||
.guilds-wrapper {
|
||||
padding-top: 50px !important;
|
||||
}
|
||||
|
||||
[class*="guilds-wrapper"] + [class*="flex"] {
|
||||
border-radius: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.unread-mentions-indicator-top {
|
||||
top: 45px;
|
||||
}
|
|
@ -0,0 +1,60 @@
|
|||
.bd-scroller-wrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.bd-scroller {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-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;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-dark {
|
||||
.bd-scroller {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #36393e;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #2b2e31;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-button {
|
||||
cursor: pointer;
|
||||
color: #b9bbbe;
|
||||
background: #202225;
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
|
@ -0,0 +1,2 @@
|
|||
$logoSmallBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
$logoBigBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==);
|
|
@ -1,3 +1,9 @@
|
|||
@import './sidebarview';
|
||||
@import './images.scss';
|
||||
@import './colours.scss';
|
||||
@import './animations.scss';
|
||||
@import './layouts.scss';
|
||||
@import './bdsettings.scss';
|
||||
@import './discord.scss';
|
||||
@import './sidebarview.scss';
|
||||
@import './generic.scss';
|
||||
|
||||
@import './discordoverrides.scss';
|
|
@ -0,0 +1,19 @@
|
|||
.bd-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bd-flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.bd-flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bd-flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-flex-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
|
@ -0,0 +1,97 @@
|
|||
.bd-plugin-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
background: rgba(32, 34, 37, 0.6);
|
||||
border: 1px solid #202225;
|
||||
padding: 5px 10px;
|
||||
min-height: 150px;
|
||||
color: #b9bbbe;
|
||||
border-radius: 8px;
|
||||
margin-top: 10px;
|
||||
|
||||
.bd-plugin-header {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 1px 0px darken(#2f3136, 8%);
|
||||
}
|
||||
|
||||
.bd-plugin-body {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
|
||||
.bd-plugin-description {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 60px;
|
||||
min-height: 60px;
|
||||
color: #8a8c90;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: rgba(32, 34, 37, 0.6);
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.bd-plugin-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
align-items: flex-end;
|
||||
|
||||
.bd-plugin-extra {
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-switch-wrapper {
|
||||
flex: 0 0 auto;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bd-switch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #72767d;
|
||||
border-radius: 14px;
|
||||
transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: #f6f6f7;
|
||||
border-radius: 10px;
|
||||
transition: all .15s ease;
|
||||
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,77 +0,0 @@
|
|||
.bd-sidebar-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bd-sidebar-region {
|
||||
background: #202225;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-pack: end;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
padding-top: 50px;
|
||||
z-index: 5;
|
||||
|
||||
.bd-settingsWrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
min-height: 1px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bd-scroller {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
|
||||
.bd-sidebar {
|
||||
padding: 0;
|
||||
|
||||
.bd-header {
|
||||
padding: 6px 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
color: rgba(255,255,255,0.15);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
||||
.bd-item {
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: 6px;
|
||||
padding: 6px 10px;
|
||||
color: #b9bbbe;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content-region {
|
||||
|
||||
}
|
||||
}
|
|
@ -17,7 +17,8 @@
|
|||
justify-content: flex-end;
|
||||
flex: 1 0 30%;
|
||||
z-index: 5;
|
||||
max-width: 300px;
|
||||
max-width: 310px;
|
||||
min-width: 310px;
|
||||
|
||||
.bd-settingsWrap {
|
||||
display: flex;
|
||||
|
@ -26,97 +27,110 @@
|
|||
flex: 1;
|
||||
min-height: 1px;
|
||||
box-sizing: border-box;
|
||||
padding: 50px 15px 15px 15px;
|
||||
padding: 80px 15px 15px 15px;
|
||||
|
||||
.bd-scroller {
|
||||
.bd-scroller.bd-sidebar {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding: 0;
|
||||
|
||||
.bd-sidebar {
|
||||
padding: 0;
|
||||
.bd-header {
|
||||
padding: 6px 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.bd-header {
|
||||
padding: 6px 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
.bd-item {
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: 6px;
|
||||
padding: 6px 10px;
|
||||
color: $coldimwhite;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $colbdblue;
|
||||
}
|
||||
|
||||
.bd-item {
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: 6px;
|
||||
padding: 6px 10px;
|
||||
color: #b9bbbe;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFF;
|
||||
}
|
||||
&.active {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings-x {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 250px;
|
||||
border: 2px solid #6e6e6e;
|
||||
border-radius: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(218,5%,47%,.3);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidebar-view {
|
||||
.bd-content-region {
|
||||
flex-grow: 1;
|
||||
transform: translateX(-100%);
|
||||
background: #2F3136;
|
||||
background: #36393e;
|
||||
box-shadow: 0 0 4px #202225;
|
||||
|
||||
.bd-content-tools {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
.bd-content-column {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-settingsWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.bd-scroller-wrap {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bd-settingsWrap-header {
|
||||
color: $colbdblue;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 100%;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content > div:not(.active) {
|
||||
.bd-content-column > div:not(.active) {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bd-content {
|
||||
|
@ -131,83 +145,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.active {
|
||||
.bd-content-region {
|
||||
animation: bd-slidein .6s forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes bd-slidein {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-slideout {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-slideoutin {
|
||||
0% {
|
||||
transform: translateX(-10%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-10%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue