camelCase
This commit is contained in:
Jiiks
parent
462b198895
commit
0e32d835ef
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<span class="bd-emotewrapper" :class="{'bd-emote-favourite': favourite, 'bd-emote-no-wrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
|
||||
<span class="bd-emotewrapper" :class="{'bd-emoteFavourite': favourite, 'bd-emote-no-wrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
|
||||
<img class="bd-emote" :src="src" :alt="`;${name};`" />
|
||||
|
||||
<div class="bd-emote-favourite-button" :class="{'bd-active': favourite}" @click="toggleFavourite">
|
||||
<div class="bd-emoteFavouriteButton" :class="{'bd-active': favourite}" @click="toggleFavourite">
|
||||
<MiStar :size="16" />
|
||||
</div>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-toast-up {
|
||||
@keyframes bd-toastUp {
|
||||
0% {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-toast-down {
|
||||
@keyframes bd-toastDown {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-fade-out {
|
||||
@keyframes bd-fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-fade-in {
|
||||
@keyframes bd-fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -93,26 +93,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-modal-in {
|
||||
@keyframes bd-modalIn {
|
||||
0% { transform: scale(0.8); opacity: 0; }
|
||||
90% { transform: scale(1.01); opacity: 1; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
@keyframes bd-modal-out {
|
||||
@keyframes bd-modalOut {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
10% { transform: scale(1.01); opacity: 1; }
|
||||
90% { opacity: 0; }
|
||||
100% { transform: scale(0.8); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes bd-backdrop-in {
|
||||
@keyframes bd-backdropIn {
|
||||
0% { opacity: 0; }
|
||||
}
|
||||
@keyframes bd-backdrop-out {
|
||||
@keyframes bd-backdropOut {
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes bd-warn-shake {
|
||||
@keyframes bd-warnShake {
|
||||
10%, 90% {
|
||||
transform: translate3d(-4px, -4px, 0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-profile-badges-wrap {
|
||||
.bd-profileBadgesWrap {
|
||||
display: inline-flex;
|
||||
margin-top: 8px;
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -8,11 +8,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-profile-badges {
|
||||
.bd-profileBadges {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bd-profile-badge {
|
||||
.bd-profileBadge {
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -22,25 +22,25 @@
|
|||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.bd-profile-badge-developer,
|
||||
.bd-profile-badge-webdev,
|
||||
.bd-profile-badge-contributor {
|
||||
.bd-profileBadgeDeveloper,
|
||||
.bd-profileBadgeWebdev,
|
||||
.bd-profileBadgeContributor {
|
||||
background-image: $logoSmallBw;
|
||||
filter: brightness(10);
|
||||
|
||||
.theme-light [class*="topSectionNormal-"] .bd-profile-badges-profile-modal > &,
|
||||
.theme-light :not(.bd-profile-badges-profile-modal) > & {
|
||||
.theme-light [class*="topSectionNormal-"] .bd-profileBadgesProfileModal > &,
|
||||
.theme-light :not(.bd-profileBadgesProfileModal) > & {
|
||||
background-image: $logoSmallLight;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-profile-badges.bd-profile-badges-nametag {
|
||||
.bd-profileBadges.bd-profileBadges-nametag {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
height: 11px;
|
||||
|
||||
.bd-profile-badge {
|
||||
.bd-profileBadge {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
|
|
@ -50,13 +50,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
// .member-username .bd-profile-badges {
|
||||
// .member-username .bd-profileBadges {
|
||||
// display: inline-block;
|
||||
// height: 17px;
|
||||
// width: 14px;
|
||||
//
|
||||
// .bd-badge,
|
||||
// .bd-badge-c {
|
||||
// .bd-badge {
|
||||
// width: 14px;
|
||||
// height: 16px;
|
||||
// background-position: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-settings-button {
|
||||
.bd-settingsButton {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 22px;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.bd-settings-button-btn {
|
||||
.bd-settingsButtonBtn {
|
||||
background-image: $logoSmallBw;
|
||||
background-size: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
&.bd-loading {
|
||||
animation: bd-settings-button-pulse 1.5s infinite;
|
||||
animation: bd-settingsButtonPulse 1.5s infinite;
|
||||
}
|
||||
|
||||
&.bd-updates {
|
||||
|
|
@ -43,11 +43,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.bd-hide-button {
|
||||
animation: bd-fade-out 0.4s ease-out;
|
||||
&.bd-hideButton {
|
||||
animation: bd-fadeOut 0.4s ease-out;
|
||||
|
||||
&.bd-active {
|
||||
animation: bd-fade-in 0.4s ease-in;
|
||||
animation: bd-fadeIn 0.4s ease-in;
|
||||
}
|
||||
|
||||
&:not(.bd-active):not(.bd-animating) {
|
||||
|
|
@ -60,11 +60,11 @@
|
|||
}
|
||||
|
||||
&.bd-active,
|
||||
&.bd-hide-button {
|
||||
&.bd-hideButton {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.bd-settings-button-btn {
|
||||
.bd-settingsButtonBtn {
|
||||
background-image: $logoBigBw;
|
||||
background-size: 100% 100%;
|
||||
filter: none;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-settings-button-pulse {
|
||||
@keyframes bd-settingsButtonPulse {
|
||||
0% {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
margin-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
|
||||
.bd-card-header {
|
||||
.bd-cardHeader {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
|
||||
.bd-card-icon {
|
||||
.bd-cardIcon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-size: cover;
|
||||
|
|
@ -31,12 +31,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-card-body {
|
||||
.bd-cardBody {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
|
||||
.bd-card-description {
|
||||
.bd-cardDescription {
|
||||
flex-grow: 1;
|
||||
min-height: 60px;
|
||||
color: #8a8c90;
|
||||
|
|
@ -46,11 +46,11 @@
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.bd-card-footer {
|
||||
.bd-cardFooter {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.bd-card-extra {
|
||||
.bd-cardExtra {
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
.bd-controls {
|
||||
margin-left: 15px;
|
||||
|
||||
.bd-button-group {
|
||||
.bd-buttonGroup {
|
||||
.bd-button {
|
||||
fill: #fff;
|
||||
width: 30px;
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-switch-wrapper {
|
||||
.bd-switchWrapper {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
|
||||
|
|
@ -82,8 +82,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-content-author {
|
||||
.bd-content-author-link {
|
||||
.bd-contentAuthor {
|
||||
.bd-contentAuthorLink {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -92,10 +92,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-content-author-links {
|
||||
.bd-contentAuthorLinks {
|
||||
padding: 3px 5px;
|
||||
|
||||
.bd-popover-inner > :first-child {
|
||||
.bd-popoverInner > :first-child {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.bd-pluginsview,
|
||||
.bd-themesview {
|
||||
.bd-online-ph {
|
||||
.bd-onlinePh {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 10% 0;
|
||||
|
|
|
|||
|
|
@ -120,9 +120,9 @@
|
|||
fill: $colwarn;
|
||||
}
|
||||
|
||||
.bd-popover-wrapper,
|
||||
.bd-popoverWrapper,
|
||||
.bd-popoverWrapper {
|
||||
.bd-popover-inner,
|
||||
.bd-popoverInner,
|
||||
.bd-popoverInner {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-material-design-icon,
|
||||
.bd-materialDesignIcon,
|
||||
.bd-materialDesignIcon {
|
||||
display: flex;
|
||||
fill: #7e8084;
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-popover-arrow,
|
||||
.bd-popoverArrow,
|
||||
.bd-popoverArrow {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,31 +13,31 @@
|
|||
// box-shadow: 0px 0px 5px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.bd-remoteCard-title {
|
||||
.bd-remoteCardTitle {
|
||||
color: #b9bbbe;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bd-remoteCard-likes {
|
||||
.bd-remoteCardLikes {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bd-remoteCard-infoContainer {
|
||||
.bd-remoteCardInfoContainer {
|
||||
margin-left: 10px;
|
||||
|
||||
.bd-remoteCard-infoBox {
|
||||
.bd-remoteCardInfoBox {
|
||||
color: #b3b5b8;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
|
||||
.bd-remoteCard-info {
|
||||
.bd-remoteCardInfo {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
display: flex;
|
||||
fill: $colbdgreen;
|
||||
}
|
||||
|
|
@ -45,20 +45,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-remoteCard-thumb {
|
||||
.bd-remoteCardThumb {
|
||||
height: 100px;
|
||||
width: 180px;
|
||||
background: rgba(0,0,0,.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bd-remoteCard-tags {
|
||||
.bd-remoteCardTags {
|
||||
color: #828a97;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.bd-button-group {
|
||||
.bd-buttonGroup {
|
||||
align-self: flex-end;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
.bd-settings-schemes {
|
||||
.bd-settingsSchemes {
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
|
||||
|
||||
.bd-settings-schemes-container {
|
||||
.bd-settingsSchemesContainer {
|
||||
margin-right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings-scheme {
|
||||
.bd-settingsScheme {
|
||||
display: inline-block;
|
||||
width: calc(33.3% - 15px);
|
||||
margin: 0 15px 15px 0;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
|
||||
.bd-settings-modal & {
|
||||
.bd-settingsModal & {
|
||||
width: calc(50% - 15px);
|
||||
|
||||
.bd-settings-scheme-icon {
|
||||
.bd-settingsSchemeIcon {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings-scheme-icon {
|
||||
.bd-settingsSchemeIcon {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
background: center / cover no-repeat #2f3136;
|
||||
}
|
||||
|
||||
.bd-settings-scheme-name {
|
||||
.bd-settingsSchemeName {
|
||||
font-weight: 500;
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
||||
.bd-settings-scheme-hint {
|
||||
.bd-settingsSchemeHint {
|
||||
flex: 1 1 auto;
|
||||
color: #72767d;
|
||||
font-size: 14px;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
.bd-settings-scheme-icon {
|
||||
.bd-settingsSchemeIcon {
|
||||
border-color: lighten($coldimwhite, 20%);
|
||||
}
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
&.bd-active {
|
||||
cursor: default;
|
||||
|
||||
.bd-settings-scheme-icon {
|
||||
.bd-settingsSchemeIcon {
|
||||
border-color: $colbdblue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.bd-settings-x {
|
||||
.bd-settings {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 255px;
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
top: 43px;
|
||||
}
|
||||
|
||||
.bd-x-text {
|
||||
.bd-xText {
|
||||
color: #72767d;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
fill: #72767d;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
&:hover {
|
||||
background-color: hsla(218,5%,47%,.3);
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -76,17 +76,17 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.bd-material-button {
|
||||
.bd-materialButton {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #414245;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-sidebar-view {
|
||||
.bd-sidebarView {
|
||||
&::after {
|
||||
content: "";
|
||||
height: 100%;
|
||||
|
|
@ -106,26 +106,26 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.bd-sidebar-region .bd-scroller {
|
||||
.bd-sidebarRegion .bd-scroller {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.bd-content-region {
|
||||
.bd-contentRegion {
|
||||
width: 590px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.bd-content-region {
|
||||
.bd-contentRegion {
|
||||
transition: transform 0.4s ease-in-out, opacity 0.2s ease;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-stop .bd-sidebar-region {
|
||||
&.bd-stop .bd-sidebarRegion {
|
||||
z-index: 3004;
|
||||
}
|
||||
&.bd-stop .bd-content-region {
|
||||
&.bd-stop .bd-contentRegion {
|
||||
z-index: 3003;
|
||||
}
|
||||
}
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
.platform-darwin & {
|
||||
top: 0px;
|
||||
|
||||
.bd-sidebar-view .bd-sidebar-region {
|
||||
.bd-sidebarView .bd-sidebarRegion {
|
||||
padding-top: 22px;
|
||||
}
|
||||
}
|
||||
|
|
@ -142,23 +142,23 @@
|
|||
top: 0;
|
||||
}
|
||||
|
||||
&:not(.active) > .bd-sidebar-view.active,
|
||||
&.bd-settings-out .bd-sidebar-view.active {
|
||||
.bd-content-region {
|
||||
&:not(.active) > .bd-sidebarView.active,
|
||||
&.bd-settingsOut .bd-sidebarView.active {
|
||||
.bd-contentRegion {
|
||||
transform: translate(-600px, 0%);
|
||||
opacity: 0;
|
||||
width: 590px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.active) .bd-sidebar-view.active {
|
||||
.bd-content-region {
|
||||
&:not(.active) .bd-sidebarView.active {
|
||||
.bd-contentRegion {
|
||||
transform: translate(-600px, 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidebar .bd-settings-button {
|
||||
.bd-sidebar .bd-settingsButton {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ bd-tooltips {
|
|||
content: none;
|
||||
}
|
||||
|
||||
.bd-tooltip-arrow,
|
||||
.bd-popover-arrow {
|
||||
.bd-tooltipArrow,
|
||||
.bd-popoverArrow {
|
||||
border: 5px solid transparent;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
|
|
@ -37,8 +37,8 @@ bd-tooltips {
|
|||
&[x-placement^="top"] {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.bd-tooltip-arrow,
|
||||
.bd-popover-arrow {
|
||||
.bd-tooltipArrow,
|
||||
.bd-popoverArrow {
|
||||
margin-left: -5px;
|
||||
border-top-color: #000;
|
||||
bottom: -10px;
|
||||
|
|
@ -48,8 +48,8 @@ bd-tooltips {
|
|||
&[x-placement^="bottom"] {
|
||||
margin-top: 10px;
|
||||
|
||||
.bd-tooltip-arrow,
|
||||
.bd-popover-arrow {
|
||||
.bd-tooltipArrow,
|
||||
.bd-popoverArrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
top: -5px;
|
||||
border-bottom-color: #000;
|
||||
|
|
@ -59,8 +59,8 @@ bd-tooltips {
|
|||
&[x-placement^="right"] {
|
||||
margin-left: 10px;
|
||||
|
||||
.bd-tooltip-arrow,
|
||||
.bd-popover-arrow {
|
||||
.bd-tooltipArrow,
|
||||
.bd-popoverArrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
left: -5px;
|
||||
border-right-color: #000;
|
||||
|
|
@ -70,25 +70,25 @@ bd-tooltips {
|
|||
&[x-placement^="left"] {
|
||||
margin-right: 10px;
|
||||
|
||||
.bd-tooltip-arrow,
|
||||
.bd-popover-arrow {
|
||||
.bd-tooltipArrow,
|
||||
.bd-popoverArrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
right: -5px;
|
||||
border-left-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-material-button {
|
||||
.bd-materialButton {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #414245;
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.bd-window-preferences {
|
||||
.bd-window-preferences-disabled p {
|
||||
.bd-windowPreferences {
|
||||
.bd-windowPreferencesDisabled p {
|
||||
color: #f6f6f7;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
body:not(.bd-hide-button) {
|
||||
body:not(.bd-hideButton) {
|
||||
[class*="guildsWrapper-"] {
|
||||
padding-top: 49px !important;
|
||||
}
|
||||
|
|
@ -23,6 +23,6 @@ body:not(.bd-hide-button) {
|
|||
z-index: 900;
|
||||
}
|
||||
|
||||
.bd-settings-wrapper.platform-linux {
|
||||
.bd-settingsWrapper.platform-linux {
|
||||
transform: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.bd-emote-outer {
|
||||
.bd-emoteOuter {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
user-select: none;
|
||||
|
||||
.bd-is-emote {
|
||||
.bd-isEmote {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
}
|
||||
|
||||
.bd-emotewrapper,
|
||||
.bd-autocomplete-selector {
|
||||
.bd-emote-favourite-button {
|
||||
.bd-autocompleteSelector {
|
||||
.bd-emoteFavouriteButton {
|
||||
display: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -49,14 +49,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.bd-selected .bd-emote-favourite-button,
|
||||
&:hover .bd-emote-favourite-button {
|
||||
&.bd-selected .bd-emoteFavouriteButton,
|
||||
&:hover .bd-emoteFavouriteButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-autocomplete-selector {
|
||||
.bd-emote-favourite-button {
|
||||
.bd-autocompleteSelector {
|
||||
.bd-emoteFavouriteButton {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
opacity: .5;
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@
|
|||
right: 0;
|
||||
background-color: #2f3136;
|
||||
|
||||
.bd-autocomplete-inner {
|
||||
.bd-autocompleteInner {
|
||||
padding-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
|
||||
.bd-autocomplete-row {
|
||||
.bd-autocompleteRow {
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
.bd-autocomplete-selector {
|
||||
.bd-autocompleteSelector {
|
||||
border-radius: 3px;
|
||||
padding: 8px;
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-autocomplete-title {
|
||||
.bd-autocompleteTitle {
|
||||
color: #72767d;
|
||||
padding: 4px 0;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-autocomplete-field {
|
||||
.bd-autocompleteField {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
color: #f6f6f7;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-spinner-7 {
|
||||
.bd-spinner7 {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
|
|
@ -56,11 +56,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-button-group {
|
||||
.bd-buttonGroup {
|
||||
display: flex;
|
||||
|
||||
.bd-button,
|
||||
.bd-material-button {
|
||||
.bd-materialButton {
|
||||
&:first-of-type {
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.bd-drawer {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.bd-settings-category > & {
|
||||
.bd-settingsCategory > & {
|
||||
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
|
||||
|
||||
.bd-drawer-contents > .bd-form-item:last-child > .bd-form-divider:last-child {
|
||||
.bd-drawerContents > .bd-formItem:last-child > .bd-form-divider:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-form-header {
|
||||
.bd-formHeader {
|
||||
margin-top: 0;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-drawer-open-button {
|
||||
.bd-drawerOpenButton {
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
|
||||
.bd-chevron-1, .bd-chevron-2 {
|
||||
.bd-chevron1, .bd-chevron2 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -32,11 +32,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-drawer-contents-wrap {
|
||||
.bd-drawerContentsWrap {
|
||||
min-height: 5px;
|
||||
}
|
||||
|
||||
.bd-drawer-contents {
|
||||
.bd-drawerContents {
|
||||
// margin-top is set in JavaScript when the drawer is animating
|
||||
// It still needs to be set here for it to animate
|
||||
transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
|
||||
|
|
@ -44,27 +44,27 @@
|
|||
margin-top: -100%;
|
||||
opacity: 0;
|
||||
|
||||
> .bd-form-item:last-child > .bd-form-divider:last-child {
|
||||
> .bd-formItem:last-child > .bd-form-divider:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-animating,
|
||||
&:not(.bd-drawer-open) {
|
||||
> .bd-drawer-contents-wrap {
|
||||
&:not(.bd-drawerOpen) {
|
||||
> .bd-drawerContentsWrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-drawer-open {
|
||||
> .bd-drawer-header .bd-drawer-open-button {
|
||||
.bd-chevron-1 {
|
||||
&.bd-drawerOpen {
|
||||
> .bd-drawerHeader .bd-drawerOpenButton {
|
||||
.bd-chevron1 {
|
||||
svg {
|
||||
transform: rotate(90deg)
|
||||
}
|
||||
}
|
||||
|
||||
.bd-chevron-2 {
|
||||
.bd-chevron2 {
|
||||
margin-left: -4px;
|
||||
svg {
|
||||
transform: rotate(270deg)
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
> .bd-drawer-contents-wrap > .bd-drawer-contents {
|
||||
> .bd-drawerContentsWrap > .bd-drawerContents {
|
||||
transform: scaleY(1) translateY(0%);
|
||||
margin-top: 0%;
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-form-header {
|
||||
.bd-formHeader {
|
||||
margin: 15px 0 10px;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 14px;
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
display: flex;
|
||||
|
||||
.bd-form-header-text {
|
||||
.bd-formHeaderText {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bd-form-header-button {
|
||||
.bd-formHeaderButton {
|
||||
flex: 0 0;
|
||||
margin-left: 5px;
|
||||
|
||||
|
|
@ -30,31 +30,31 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
.bd-form-header-button svg {
|
||||
.bd-formHeaderButton svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-form-item h5 {
|
||||
.bd-formItem h5 {
|
||||
color: #b9bbbe;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bd-form-divider {
|
||||
.bd-formDivider {
|
||||
height: 1px;
|
||||
margin: 15px 0;
|
||||
background: hsla(218,5%,47%,.3);
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
.bd-form-item-changed > & {
|
||||
.bd-formItemChanged > & {
|
||||
background: $colok;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-form-warning {
|
||||
.bd-formWarning {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
background: #d84040;
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-form-button {
|
||||
.bd-formButton {
|
||||
margin: 0;
|
||||
align-self: flex-end;
|
||||
background: #C42929;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-form-button {
|
||||
.bd-formButton {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-form-settingsarray {
|
||||
.bd-formSettingsarray {
|
||||
.bd-button.bd-button-primary {
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -6,14 +6,14 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bd-settingsarray-items {
|
||||
.bd-settingsarrayItems {
|
||||
margin-top: 15px;
|
||||
|
||||
.bd-settingsarray-item {
|
||||
.bd-settingsarrayItem {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
.bd-settingsarray-item-marker {
|
||||
.bd-settingsarrayItemMarker {
|
||||
flex: 0 0 auto;
|
||||
min-width: 15px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -21,26 +21,26 @@
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bd-settingsarray-item-contents {
|
||||
.bd-settingsarrayItemContents {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.bd-settings-panel {
|
||||
.bd-settings-categories:last-child .bd-form-item:last-child .bd-form-divider {
|
||||
.bd-settingsPanel {
|
||||
.bd-settingsCategories:last-child .bd-form-item:last-child .bd-form-divider {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bd-settings-category:only-child > div > .bd-form-item.bd-form-item-noheader:only-child {
|
||||
.bd-form-textinput,
|
||||
.bd-form-numberinput {
|
||||
+ .bd-form-divider {
|
||||
.bd-settingsCategory:only-child > div > .bd-form-item.bd-form-item-noheader:only-child {
|
||||
.bd-formTextinput,
|
||||
.bd-formNumberinput {
|
||||
+ .bd-formDivider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settingsarray-item-hint {
|
||||
.bd-settingsarrayItemHint {
|
||||
color: #aaa;
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
|
|
@ -49,13 +49,13 @@
|
|||
max-width: 385px;
|
||||
}
|
||||
|
||||
.bd-settingsarray-item-controls {
|
||||
.bd-settingsarrayItemControls {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.bd-settingsarray-open,
|
||||
.bd-settingsarray-remove {
|
||||
.bd-settingsarrayOpen,
|
||||
.bd-settingsarrayRemove {
|
||||
margin-left: 5px;
|
||||
|
||||
svg {
|
||||
|
|
@ -70,13 +70,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:last-child .bd-settings-categories:last-child .bd-form-item:last-child .bd-form-divider {
|
||||
&:last-child .bd-settingsCategories:last-child .bd-form-item:last-child .bd-form-divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-form-settingsarray-inline .bd-settingsarray-item {
|
||||
&.bd-formSettingsarrayInline .bd-settingsarrayItem {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.bd-colourpicker-swatch {
|
||||
.bd-colourpickerSwatch {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid hsla(0,0%,100%,.1);
|
||||
}
|
||||
|
||||
.bd-form-colourpicker {
|
||||
.bd-formColourpicker {
|
||||
position: relative;
|
||||
|
||||
.vc-chrome {
|
||||
|
|
@ -36,12 +36,12 @@
|
|||
}
|
||||
|
||||
&:not(.bd-hide) {
|
||||
animation: bd-colourpicker-slidein 0.1s ease-in;
|
||||
animation: bd-colourpickerSlidein 0.1s ease-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-colourpicker-slidein {
|
||||
@keyframes bd-colourpickerSlidein {
|
||||
0% {
|
||||
right: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.bd-form-dropdown {
|
||||
.bd-formDropdown {
|
||||
h3 + .bd-dropdown {
|
||||
width: 180px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
.bd-formItemFullwidth & {
|
||||
.bd-dropdown {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.bd-dropdown-current {
|
||||
.bd-dropdownCurrent {
|
||||
color: #f6f6f7;
|
||||
background: rgba(0,0,0,.1);
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
|
|
@ -27,15 +27,15 @@
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
.bd-dropdown-text {
|
||||
.bd-dropdownText {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bd-dropdown-arrow-wrap {
|
||||
.bd-dropdownArrowWrap {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 10px;
|
||||
|
||||
.bd-dropdown-arrow {
|
||||
.bd-dropdownArrow {
|
||||
border-color: rgb(153, 153, 153) transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 2.5px;
|
||||
|
|
@ -48,24 +48,24 @@
|
|||
&:hover {
|
||||
border-color: #040405;
|
||||
|
||||
.bd-dropdown-arrow-wrap .bd-dropdown-arrow {
|
||||
.bd-dropdownArrowWrap .bd-dropdownArrow {
|
||||
border-color: #f6f6f7 transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-active {
|
||||
.bd-dropdown-current {
|
||||
.bd-dropdownCurrent {
|
||||
border-color: #040405;
|
||||
}
|
||||
|
||||
.bd-dropdown-arrow-wrap .bd-dropdown-arrow {
|
||||
.bd-dropdownArrowWrap .bd-dropdownArrow {
|
||||
transform: rotateX(180deg) translateY(2px);
|
||||
border-color: #f6f6f7 transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-dropdown-options {
|
||||
.bd-dropdownOptions {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: calc(100% - 2.5px);
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
border-bottom-right-radius: 3px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.bd-dropdown-option {
|
||||
.bd-dropdownOption {
|
||||
color: white;
|
||||
padding: 11px;
|
||||
cursor: pointer;
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.bd-dropdown-option-selected {
|
||||
&.bd-dropdownOptionSelected {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-form-fileinput {
|
||||
.bd-formFileinput {
|
||||
.bd-button.bd-button-primary {
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -6,21 +6,21 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bd-selected-files {
|
||||
.bd-selectedFiles {
|
||||
margin: 15px 0;
|
||||
|
||||
.bd-selected-file {
|
||||
.bd-selectedFile {
|
||||
margin: 10px 0;
|
||||
color: #aaa;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
|
||||
.bd-file-path {
|
||||
.bd-filePath {
|
||||
flex: 1 1;
|
||||
}
|
||||
|
||||
.bd-file-open,
|
||||
.bd-file-remove {
|
||||
.bd-fileOpen,
|
||||
.bd-fileRemove {
|
||||
flex: 0 0;
|
||||
margin-left: 5px;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
cursor: pointer;
|
||||
transition: border-radius .4s cubic-bezier(0.5, 0, 0.27, 1.55), background-color .4s cubic-bezier(0.5, 0, 0.27, 1.55), box-shadow .3s cubic-bezier(0.5, 0, 0.27, 1.55);
|
||||
|
||||
.bd-guild-text {
|
||||
.bd-guildText {
|
||||
float: left;
|
||||
display: block;
|
||||
width: $size;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
border-radius: 30%;
|
||||
background-color: $colbdblue;
|
||||
|
||||
&.bd-guild-has-icon {
|
||||
&.bd-guildHasIcon {
|
||||
background-color: rgb(47, 49, 54);
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
background-color: $colbdblue;
|
||||
box-shadow: 0 0 7px 2px $colbdblue;
|
||||
|
||||
&.bd-guild-has-icon {
|
||||
&.bd-guildHasIcon {
|
||||
background-color: rgb(47, 49, 54);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
box-sizing: border-box;
|
||||
min-height: 40px;
|
||||
|
||||
.bd-keybind-selected {
|
||||
.bd-keybindSelected {
|
||||
flex: 1 1 auto;
|
||||
color: #f6f6f7;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.bd-keybind-unset {
|
||||
.bd-keybind-selected {
|
||||
&.bd-keybindUnset {
|
||||
.bd-keybindSelected {
|
||||
color: hsla(240,6%,97%,.3);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
&.bd-active {
|
||||
border-color: $colerr;
|
||||
animation: bd-keybind-pulse 1s infinite;
|
||||
animation: bd-keybindPulse 1s infinite;
|
||||
|
||||
.bd-button {
|
||||
color: $colerr;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-keybind-pulse {
|
||||
@keyframes bd-keybindPulse {
|
||||
0% { box-shadow: 0 0 6px rgba(240,71,71,.3) }
|
||||
50% { box-shadow: 0 0 10px rgba(240,71,71,.6) }
|
||||
100% { box-shadow: 0 0 6px rgba(240,71,71,.3) }
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.bd-setting-switch,
|
||||
.bd-form-textinput,
|
||||
.bd-form-textarea,
|
||||
.bd-form-numberinput,
|
||||
.bd-form-dropdown,
|
||||
.bd-form-radio,
|
||||
.bd-form-slider,
|
||||
.bd-form-colourpicker,
|
||||
.bd-form-keybind,
|
||||
.bd-form-fileinput,
|
||||
.bd-form-guildinput,
|
||||
.bd-form-settingsarray {
|
||||
.bd-settingSwitch,
|
||||
.bd-formTextinput,
|
||||
.bd-formTextarea,
|
||||
.bd-formNumberinput,
|
||||
.bd-formDropdown,
|
||||
.bd-formRadio,
|
||||
.bd-formSlider,
|
||||
.bd-formColourpicker,
|
||||
.bd-formKeybind,
|
||||
.bd-formFileinput,
|
||||
.bd-formGuildinput,
|
||||
.bd-formSettingsarray {
|
||||
.bd-title {
|
||||
display: flex;
|
||||
|
||||
|
|
@ -40,15 +40,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-form-customsetting {
|
||||
&.bd-form-customsetting-debug + .bd-form-divider {
|
||||
.bd-formCustomsetting {
|
||||
&.bd-formCustomsettingDebug + .bd-formDivider {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> .bd-form-customsetting-value {
|
||||
> .bd-formCustomsettingValue {
|
||||
margin-bottom: 0;
|
||||
|
||||
.bd-form-textarea-details {
|
||||
.bd-formTextareaDetails {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
.bd-form-radio {
|
||||
.bd-formRadio {
|
||||
display: flex;
|
||||
|
||||
.bd-form-radio-details {
|
||||
.bd-formRadioDetails {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bd-radio-group {
|
||||
.bd-radioGroup {
|
||||
width: 180px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
.bd-formItemFullwidth & {
|
||||
flex-direction: column;
|
||||
|
||||
.bd-radio-group {
|
||||
.bd-radioGroup {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-left: 0;
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
.bd-radio-control-wrap {
|
||||
.bd-radioControlWrap {
|
||||
flex: 0 0 auto;
|
||||
margin: -3px;
|
||||
margin-right: 10px;
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
border-radius: 3px;
|
||||
border: 1px solid #72767d;
|
||||
|
||||
.bd-radio-control {
|
||||
.bd-radioControl {
|
||||
// background: rgb(50, 50, 50);
|
||||
// border: 1px solid rgb(114, 118, 125);
|
||||
// border-radius: 50%;
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-radio-text {
|
||||
.bd-radioText {
|
||||
flex: 1 1 auto;
|
||||
color: white;
|
||||
word-wrap: break-word;
|
||||
|
|
@ -66,15 +66,15 @@
|
|||
border-color: #040405;
|
||||
}
|
||||
|
||||
&.bd-radio-selected {
|
||||
&.bd-radioSelected {
|
||||
background-color: $colbdblue;
|
||||
border-color: $colbdblue;
|
||||
|
||||
.bd-radio-control-wrap {
|
||||
.bd-radioControlWrap {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
|
||||
.bd-radio-control {
|
||||
.bd-radioControl {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.bd-form-slider {
|
||||
.bd-formSlider {
|
||||
h3 + .bd-slider {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
.bd-formItemFullwidth & {
|
||||
.bd-title {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -19,15 +19,15 @@
|
|||
min-height: 24px;
|
||||
min-width: 180px;
|
||||
|
||||
.bd-slider-container {
|
||||
.bd-sliderContainer {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.bd-slider-points {
|
||||
.bd-sliderPoints {
|
||||
padding: 0 5px;
|
||||
|
||||
.bd-slider-point {
|
||||
.bd-sliderPoint {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
position: relative;
|
||||
|
|
@ -52,13 +52,13 @@
|
|||
margin-left: 11px;
|
||||
}
|
||||
|
||||
+ .bd-slider-point {
|
||||
+ .bd-sliderPoint {
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-slider-bar {
|
||||
.bd-sliderBar {
|
||||
background-color: #4f545c;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.bd-slider-bar-filled {
|
||||
.bd-sliderBarFilled {
|
||||
background-color: $colbdblue;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
|
|
@ -82,11 +82,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-slider-thumb-wrap {
|
||||
.bd-sliderThumbWrap {
|
||||
margin: -16px 0;
|
||||
padding: 0 5px;
|
||||
|
||||
.bd-slider-thumb {
|
||||
.bd-sliderThumb {
|
||||
width: 10px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-setting-switch {
|
||||
.bd-settingSwitch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.bd-switch-wrapper {
|
||||
.bd-switchWrapper {
|
||||
flex: 0 0 auto;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.bd-form-textinput,
|
||||
.bd-form-numberinput {
|
||||
.bd-formTextinput,
|
||||
.bd-formNumberinput {
|
||||
h3 {
|
||||
+ .bd-textinput-wrapper,
|
||||
+ .bd-textinputWrapper,
|
||||
+ .bd-number {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-textinput-wrapper,
|
||||
.bd-textinputWrapper,
|
||||
.bd-number {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
|
@ -31,12 +31,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
.bd-formItemFullwidth & {
|
||||
.bd-title {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bd-textinput-wrapper,
|
||||
.bd-textinputWrapper,
|
||||
.bd-number {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
|
|
@ -49,13 +49,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-textinput-wrapper,
|
||||
.bd-textinputWrapper,
|
||||
.bd-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bd-form-textarea {
|
||||
.bd-form-textarea-wrap,
|
||||
.bd-formTextarea {
|
||||
.bd-formTextareaWrap,
|
||||
textarea.bd-textarea {
|
||||
margin-top: 15px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-number-spinner {
|
||||
.bd-numberSpinner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -118,23 +118,23 @@
|
|||
cursor: pointer;
|
||||
font-size: 0;
|
||||
|
||||
.bd-up-arrow {
|
||||
.bd-upArrow {
|
||||
border-color: transparent transparent rgb(153, 153, 153);
|
||||
border-style: solid;
|
||||
border-width: 2.5px 5px 5px;
|
||||
}
|
||||
|
||||
&:hover .bd-up-arrow {
|
||||
&:hover .bd-upArrow {
|
||||
border-color: transparent transparent rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
.bd-down-arrow {
|
||||
.bd-downArrow {
|
||||
border-color: rgb(153, 153, 153) transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 2.5px;
|
||||
}
|
||||
|
||||
&:hover .bd-down-arrow {
|
||||
&:hover .bd-downArrow {
|
||||
border-color: rgb(200, 200, 200) transparent transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-material-button {
|
||||
.bd-materialButton {
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-pre-wrap {
|
||||
.bd-preWrap {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@keyframes bd-refresh-circle-anim-out {
|
||||
@keyframes bd-refreshCircleAnimOut {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
stroke-dasharray: 36.5, 200;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-refresh-circle-anim-in {
|
||||
@keyframes bd-refreshCircleAnimIn {
|
||||
0% {
|
||||
transform: rotate(-360deg);
|
||||
stroke-dasharray: 0, 200;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-refresh-arrow-rotate {
|
||||
@keyframes bd-refreshArrowRotate {
|
||||
from {
|
||||
transform: rotate(-680deg);
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-refresh-button {
|
||||
.bd-refreshButton {
|
||||
cursor: pointer;
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
|
|
@ -59,107 +59,107 @@
|
|||
margin: 6px;
|
||||
}
|
||||
|
||||
.bd-svg-refresh {
|
||||
.bd-svgRefresh {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.bd-refreshed {
|
||||
.bd-svg-refresh {
|
||||
.bd-svgRefresh {
|
||||
transition: .5s cubic-bezier(.4,0,0,1) .2s;
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line:nth-of-type(1) {
|
||||
.bd-svgCancelLine:nth-of-type(1) {
|
||||
transform-origin: bottom;
|
||||
transition: .5s cubic-bezier(0,0,0,1) .1s, transform-origin 1ms;
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line:nth-of-type(2) {
|
||||
.bd-svgCancelLine:nth-of-type(2) {
|
||||
transform-origin: left;
|
||||
transition: .5s cubic-bezier(0,0,0,1), transform-origin 1ms;
|
||||
}
|
||||
|
||||
.bd-svg-circle {
|
||||
.bd-svgCircle {
|
||||
stroke-dasharray: 36.5, 200;
|
||||
stroke-dashoffset: -7.5;
|
||||
transform-origin: center;
|
||||
animation: bd-refresh-circle-anim-in 1s cubic-bezier(.4,0,0,1);
|
||||
animation: bd-refreshCircleAnimIn 1s cubic-bezier(.4,0,0,1);
|
||||
}
|
||||
|
||||
.bd-svg-arrow {
|
||||
.bd-svgArrow {
|
||||
transform-origin: center;
|
||||
animation: bd-refresh-arrow-rotate 1s cubic-bezier(.4,0,0,1);
|
||||
animation: bd-refreshArrowRotate 1s cubic-bezier(.4,0,0,1);
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-refreshing {
|
||||
.bd-svg-refresh {
|
||||
.bd-svgRefresh {
|
||||
transition: .5s cubic-bezier(.4,0,0,1);
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line {
|
||||
.bd-svgCancelLine {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line:nth-of-type(1) {
|
||||
.bd-svgCancelLine:nth-of-type(1) {
|
||||
transform-origin: top;
|
||||
transform: scale(1,1);
|
||||
transition: .5s cubic-bezier(0,0,0,1) .4s, transform-origin 1ms;
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line:nth-of-type(2) {
|
||||
.bd-svgCancelLine:nth-of-type(2) {
|
||||
transform-origin: right;
|
||||
transform: scale(1,1);
|
||||
transition: .5s cubic-bezier(0,0,0,1) .3s, transform-origin 1ms;
|
||||
}
|
||||
|
||||
.bd-svg-circle {
|
||||
.bd-svgCircle {
|
||||
stroke-dasharray: 36.5, 200;
|
||||
stroke-dashoffset: -44;
|
||||
transform-origin: center;
|
||||
animation: bd-refresh-circle-anim-out 1s cubic-bezier(.4,0,0,1);
|
||||
animation: bd-refreshCircleAnimOut 1s cubic-bezier(.4,0,0,1);
|
||||
}
|
||||
|
||||
.bd-svg-arrow {
|
||||
.bd-svgArrow {
|
||||
transform-origin: center;
|
||||
transform: rotate(360deg);
|
||||
transition: 1s cubic-bezier(.4,0,0,1);
|
||||
}
|
||||
|
||||
.bd-svg-arrow-triangle {
|
||||
.bd-svgArrowTriangle {
|
||||
transition: .5s ease;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-svg-cancel {
|
||||
.bd-svgCancel {
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line {
|
||||
.bd-svgCancelLine {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line:nth-of-type(1) {
|
||||
.bd-svgCancelLine:nth-of-type(1) {
|
||||
transform: scale(1,0);
|
||||
}
|
||||
|
||||
.bd-svg-cancel-line:nth-of-type(2) {
|
||||
.bd-svgCancelLine:nth-of-type(2) {
|
||||
transform: scale(0,1);
|
||||
}
|
||||
|
||||
.bd-svg-circle {
|
||||
.bd-svgCircle {
|
||||
stroke-dasharray: 36.5, 200;
|
||||
stroke-dashoffset: -7.5;
|
||||
}
|
||||
|
||||
.bd-svg-arrow {
|
||||
.bd-svgArrow {
|
||||
transform-origin: center;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.bd-svg-arrow-triangle {
|
||||
.bd-svgArrowTriangle {
|
||||
transform-origin: 17.1px 6.9px;
|
||||
transition: .8s ease .2s;
|
||||
transform: scale(1);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-scroller-wrap {
|
||||
.bd-scrollerWrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
-webkit-animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-anim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
-webkit-animation: bd-spinnerAnim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinnerAnim 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
border-radius: 50%;
|
||||
right: 5px;
|
||||
top: 15px;
|
||||
-webkit-animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
-webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinnerAnimBefore 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
|
@ -31,14 +31,14 @@
|
|||
border-radius: 50%;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
-webkit-animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
-webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinnerAnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim {
|
||||
@-webkit-keyframes bd-spinnerAnim {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim {
|
||||
@keyframes bd-spinnerAnim {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim-before {
|
||||
@-webkit-keyframes bd-spinnerAnimBefore {
|
||||
0% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim-before {
|
||||
@keyframes bd-spinnerAnimBefore {
|
||||
0% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim-after {
|
||||
@-webkit-keyframes bd-spinnerAnimAfter {
|
||||
0% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim-after {
|
||||
@keyframes bd-spinnerAnimAfter {
|
||||
0% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-spinner-1 {
|
||||
.bd-spinner1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.bd-spinner-10 {
|
||||
.bd-spinner10 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-10-anim 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner10-anim 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite;
|
||||
animation: bd-spinner10-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-10-anim1 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner10-anim1 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-10-anim {
|
||||
@keyframes bd-spinner10-anim {
|
||||
0% {
|
||||
transform: scale(0.8) rotate(0.01deg);
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-10-anim1 {
|
||||
@keyframes bd-spinner10-anim1 {
|
||||
0% {
|
||||
transform: rotate(-25deg) rotate(0.01deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-spinner-2 {
|
||||
.bd-spinner2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-spinner-3 {
|
||||
.bd-spinner3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
border-radius: 50%;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
-webkit-animation: bd-spinner-3-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-3-anim-before 3s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
-webkit-animation: bd-spinner3-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner3-anim-before 3s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
border-radius: 50%;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
-webkit-animation: bd-spinner-3-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-3-anim-after 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite;
|
||||
-webkit-animation: bd-spinner3-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner3-anim-after 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-3-anim-before {
|
||||
@-webkit-keyframes bd-spinner3-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-3-anim-before {
|
||||
@keyframes bd-spinner3-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-3-anim-after {
|
||||
@-webkit-keyframes bd-spinner3-anim-after {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-3-anim-after {
|
||||
@keyframes bd-spinner3-anim-after {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.bd-spinner-4 {
|
||||
.bd-spinner4 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
-webkit-animation: bd-spinner-4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
|
||||
animation: bd-spinner-4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
|
||||
-webkit-animation: bd-spinner4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
|
||||
animation: bd-spinner4-anim 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-4-anim {
|
||||
@-webkit-keyframes bd-spinner4-anim {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-4-anim {
|
||||
@keyframes bd-spinner4-anim {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-spinner-5 {
|
||||
.bd-spinner5 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
border-radius: 5px;
|
||||
left: 5px;
|
||||
bottom: 10px;
|
||||
-webkit-animation: bd-spinner-anim-before 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-5-anim-before 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite;
|
||||
-webkit-animation: bd-spinnerAnimBefore 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner5-anim-before 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
border-radius: 5px;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
-webkit-animation: bd-spinner-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-5-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
-webkit-animation: bd-spinnerAnimAfter 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner5-anim-after 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-5-anim-before {
|
||||
@-webkit-keyframes bd-spinner5-anim-before {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-5-anim-before {
|
||||
@keyframes bd-spinner5-anim-before {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-spinner-6 {
|
||||
.bd-spinner6 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
-webkit-animation: bd-spinner-6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
-webkit-animation: bd-spinner6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner6-anim-before 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
|
@ -30,14 +30,14 @@
|
|||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
-webkit-animation: bd-spinner-6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
-webkit-animation: bd-spinner6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner6-anim-after 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-6-anim-before {
|
||||
@-webkit-keyframes bd-spinner6-anim-before {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-6-anim-before {
|
||||
@keyframes bd-spinner6-anim-before {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-6-anim-after {
|
||||
@-webkit-keyframes bd-spinner6-anim-after {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-6-anim-after {
|
||||
@keyframes bd-spinner6-anim-after {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.bd-spinner-7 {
|
||||
.bd-spinner7 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-animation: bd-spinner-7-anim 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner-7-anim 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
-webkit-animation: bd-spinner7-anim 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner7-anim 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
border-radius: 50%;
|
||||
left: 0px;
|
||||
top: 16px;
|
||||
-webkit-animation: bd-spinner-7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite;
|
||||
animation: bd-spinner-7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite;
|
||||
-webkit-animation: bd-spinner7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite;
|
||||
animation: bd-spinner7-anim-before 1s cubic-bezier(.2,0,0,.2) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
border-radius: 50%;
|
||||
left: 15px;
|
||||
top: 16px;
|
||||
-webkit-animation: bd-spinner-7-anim-after 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner-7-anim-after 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
-webkit-animation: bd-spinner7-anim-after 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner7-anim-after 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-box-shadow: 15px 0 0 0 #fff;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim {
|
||||
@-webkit-keyframes bd-spinner7-anim {
|
||||
0% {
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim {
|
||||
@keyframes bd-spinner7-anim {
|
||||
0% {
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim-before {
|
||||
@-webkit-keyframes bd-spinner7-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim-before {
|
||||
@keyframes bd-spinner7-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim-after {
|
||||
@-webkit-keyframes bd-spinner7-anim-after {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim-after {
|
||||
@keyframes bd-spinner7-anim-after {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-spinner-8 {
|
||||
.bd-spinner8 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-8-anim-before 1.5s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner8-anim-before 1.5s cubic-bezier(.4,0,0,1) infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -28,11 +28,11 @@
|
|||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-8-anim-after 1.5s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner8-anim-after 1.5s cubic-bezier(.4,0,0,1) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-8-anim-before {
|
||||
@keyframes bd-spinner8-anim-before {
|
||||
0% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-8-anim-after {
|
||||
@keyframes bd-spinner8-anim-after {
|
||||
0% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-spinner-9 {
|
||||
.bd-spinner9 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-9-anim 1s cubic-bezier(.4,0,0,1) -.05s infinite;
|
||||
animation: bd-spinner9-anim 1s cubic-bezier(.4,0,0,1) -.05s infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -28,11 +28,11 @@
|
|||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-9-anim 1s ease infinite;
|
||||
animation: bd-spinner9-anim 1s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-9-anim {
|
||||
@keyframes bd-spinner9-anim {
|
||||
0% {
|
||||
transform: scale(1) rotate(0.01deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
flex: 0 0;
|
||||
}
|
||||
|
||||
.bd-material-button {
|
||||
.bd-materialButton {
|
||||
margin: -1px 0 -1px 4px;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
border-bottom-color: $colbdblue;
|
||||
color: #fff;
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -45,26 +45,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-material-button-wrap {
|
||||
.bd-materialButtonWrap {
|
||||
margin-right: 15px;
|
||||
flex: 0 0;
|
||||
padding: 17px 0 18px;
|
||||
|
||||
.bd-material-button {
|
||||
.bd-materialButton {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-button,
|
||||
.bd-material-button-wrap {
|
||||
.bd-material-button {
|
||||
.bd-materialButtonWrap {
|
||||
.bd-materialButton {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: 0 0;
|
||||
cursor: pointer;
|
||||
|
||||
.material-design-icon,
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
fill: #87909c;
|
||||
|
|
@ -79,14 +79,14 @@
|
|||
&:hover {
|
||||
background-color: transparent;
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settingswrap-header & {
|
||||
.bd-settingswrapHeader & {
|
||||
// margin-top: -17px;
|
||||
margin-bottom: -20px;
|
||||
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
// padding: 18px 0 17px;
|
||||
}
|
||||
|
||||
.bd-material-button {
|
||||
.bd-materialButton {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.bd-flex-row,
|
||||
.bd-flexRow,
|
||||
.bd-flexRow {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.bd-flex-col,
|
||||
.bd-flexCol,
|
||||
.bd-flexCol {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bd-flex-grow,
|
||||
.bd-flexGrow,
|
||||
.bd-flexGrow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-flex-spacer,
|
||||
.bd-flexSpacer,
|
||||
.bd-flexSpacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
z-index: 9000;
|
||||
justify-content: center;
|
||||
|
||||
animation: bd-backdrop-in 0.22s ease;
|
||||
&.bd-backdrop-out {
|
||||
animation: bd-backdrop-out 0.22s ease;
|
||||
animation: bd-backdropIn 0.22s ease;
|
||||
&.bd-backdropOut {
|
||||
animation: bd-backdropOut 0.22s ease;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.bd-modal-basic {
|
||||
.bd-modal-basic-body {
|
||||
.bd-modalBasic {
|
||||
.bd-modalBasicBody {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
.bd-modal.bd-err {
|
||||
.bd-modal-header .bd-modal-icon svg {
|
||||
.bd-modalHeader .bd-modalIcon svg {
|
||||
fill: $colerr;
|
||||
}
|
||||
|
||||
.bd-modal-body {
|
||||
.bd-modalBody {
|
||||
padding-bottom: 15px;
|
||||
min-height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-modal-error .bd-modal-error-title {
|
||||
.bd-modalError .bd-modalErrorTitle {
|
||||
padding: 5px;
|
||||
background: rgba(0,0,0,.3);
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.bd-modal-error {
|
||||
.bd-modalError {
|
||||
margin-top: 5px;
|
||||
|
||||
.bd-scroller-wrap {
|
||||
.bd-scrollerWrap {
|
||||
background: rgba(0,0,0,.2);
|
||||
|
||||
.bd-scroller {
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-modal-error .bd-scroller-wrap {
|
||||
.bd-modalError .bd-scrollerWrap {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bd-modal-error.bd-open {
|
||||
.bd-modal-error-body {
|
||||
.bd-modalError.bd-open {
|
||||
.bd-modalErrorBody {
|
||||
transform: scaleY(1) translateY(0%);
|
||||
margin-top: 0%;
|
||||
opacity: 1;
|
||||
|
|
@ -46,12 +46,12 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.bd-scroller-wrap {
|
||||
.bd-scrollerWrap {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-modal-error .bd-modal-error-body {
|
||||
.bd-modalError .bd-modalErrorBody {
|
||||
white-space: pre-wrap;
|
||||
font-size: 12px;
|
||||
font-family: 'Consolas';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.bd-modal-footer {
|
||||
.bd-footer-alert {
|
||||
.bd-modalFooter {
|
||||
.bd-footerAlert {
|
||||
margin: -64px 10px 10px;
|
||||
height: 0;
|
||||
display: flex;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
&.bd-warn {
|
||||
background-color: $colerr;
|
||||
animation: bd-warn-shake 0.4s;
|
||||
animation: bd-warnShake 0.4s;
|
||||
}
|
||||
|
||||
&.bd-active {
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
transform: none;
|
||||
}
|
||||
|
||||
.bd-footer-alert-text {
|
||||
.bd-footerAlertText {
|
||||
flex: 1 1 auto;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-modal-header {
|
||||
.bd-modalHeader {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
flex: 0 0;
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
transition: -webkit-box-shadow .1s ease-out;
|
||||
transition: box-shadow .1s ease-out;
|
||||
|
||||
.bd-modal-headertext {
|
||||
.bd-modalHeadertext {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
flex-grow: 1;
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
padding: 1px;
|
||||
}
|
||||
|
||||
.bd-modal-icon .bd-material-design-icon {
|
||||
.bd-modalIcon .bd-materialDesignIcon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.bd-modal-x {
|
||||
.bd-modal {
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
|
@ -30,21 +30,21 @@
|
|||
margin-left: -2px -2px -2px 10px;
|
||||
padding: 2px;
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #ccc;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #2d2f34;
|
||||
|
||||
.bd-material-design-icon {
|
||||
.bd-materialDesignIcon {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-modal-scrolled .bd-modal-header {
|
||||
.bd-modalScrolled .bd-modalHeader {
|
||||
-webkit-box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
|
||||
box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.bd-modal-wrap {
|
||||
.bd-modalWrap {
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 9000;
|
||||
|
||||
.bd-modal-close-area {
|
||||
.bd-modalCloseArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -33,13 +33,13 @@
|
|||
pointer-events: none;
|
||||
z-index: 9001;
|
||||
justify-content: center;
|
||||
animation: bd-modal-in 0.22s ease;
|
||||
animation: bd-modalIn 0.22s ease;
|
||||
|
||||
&.bd-modal-out {
|
||||
animation: bd-modal-out 0.22s ease;
|
||||
&.bd-modalOut {
|
||||
animation: bd-modalOut 0.22s ease;
|
||||
}
|
||||
|
||||
.bd-modal-inner {
|
||||
.bd-modalInner {
|
||||
background: #36393e;
|
||||
contain: layout;
|
||||
flex-direction: column;
|
||||
|
|
@ -56,18 +56,18 @@
|
|||
width: 500px;
|
||||
}
|
||||
|
||||
.bd-modal-body {
|
||||
.bd-modalBody {
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
|
||||
.bd-scroller-wrap .bd-scroller {
|
||||
.bd-scrollerWrap .bd-scroller {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-modal-titlelink {
|
||||
.bd-modalTitlelink {
|
||||
cursor: pointer;
|
||||
color: $colbdblue;
|
||||
|
||||
|
|
@ -77,12 +77,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-modal-controls {
|
||||
.bd-modalControls {
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #4a4a4a;
|
||||
|
||||
.bd-modal-tip {
|
||||
.bd-modalTip {
|
||||
flex-grow: 1;
|
||||
line-height: 26px;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.bd-perm-scope {
|
||||
.bd-permScope {
|
||||
display: flex;
|
||||
|
||||
.bd-perm-allow {
|
||||
.bd-permAllow {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.bd-perm-check {
|
||||
.bd-permCheck {
|
||||
-webkit-box-sizing: border-box;
|
||||
background: hsla(0,0%,100%,.2);
|
||||
border-radius: 18px;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
padding: 2px;
|
||||
width: 36px;
|
||||
|
||||
.bd-perm-check-inner {
|
||||
.bd-permCheckInner {
|
||||
background-color: #43b581;
|
||||
border: 2px solid #35383c;
|
||||
border-radius: 16px;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-perm-inner {
|
||||
.bd-permInner {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
|
|
@ -35,14 +35,14 @@
|
|||
padding: 13px 0;
|
||||
border-bottom: 1px solid hsla(0,0%,100%,.1);
|
||||
|
||||
.bd-perm-name {
|
||||
.bd-permName {
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.bd-perm-desc {
|
||||
.bd-permDesc {
|
||||
color: hsla(0,0%,100%,.2);
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
.bd-settings-modal {
|
||||
.bd-modal .bd-modal-body {
|
||||
.bd-settingsModal {
|
||||
.bd-modal .bd-modalBody {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bd-modal .bd-modal-footer {
|
||||
.bd-modal .bd-modalFooter {
|
||||
.bd-ok {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings-modal-body {
|
||||
.bd-settingsModalBody {
|
||||
padding: 0 15px;
|
||||
margin: 0 0 74px;
|
||||
|
||||
.bd-switch-wrapper {
|
||||
.bd-switchWrapper {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-content-column {
|
||||
.bd-contentColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
|
@ -10,20 +10,20 @@
|
|||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
&.bd-contentcolumn-enter-active,
|
||||
&.bd-contentcolumn-leave-active {
|
||||
&.bd-contentcolumnEnterActive,
|
||||
&.bd-contentcolumnLeaveActive {
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
&.bd-contentcolumn-enter-to {
|
||||
&.bd-contentcolumnEnterTo {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.bd-contentcolumn-leave-to {
|
||||
&.bd-contentcolumnLeaveTo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.bd-contentcolumn-leave-active {
|
||||
&.bd-contentcolumnLeaveActive {
|
||||
position: absolute;
|
||||
width: 590px;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-sidebar-view {
|
||||
.bd-sidebarView {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bd-sidebar-region {
|
||||
.bd-sidebarRegion {
|
||||
background: #202225;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-pack: end;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-content-region {
|
||||
.bd-contentRegion {
|
||||
flex-grow: 1;
|
||||
transform: translateX(-100%);
|
||||
background: #36393e;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
&.bd-stop {
|
||||
.bd-content-region {
|
||||
.bd-contentRegion {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.bd-sidebar-region {
|
||||
.bd-sidebarRegion {
|
||||
.bd-settingswrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-content-region {
|
||||
.bd-contentRegion {
|
||||
.bd-settingswrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
> .bd-scroller-wrap {
|
||||
> .bd-scrollerWrap {
|
||||
flex-grow: 1;
|
||||
|
||||
> .bd-scroller {
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-settingswrap-header {
|
||||
.bd-settingswrapHeader {
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
margin: 30px 20px 20px;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.bd-settingswrap-header-text {
|
||||
.bd-settingswrapHeaderText {
|
||||
color: $colbdblue;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
|
|
@ -46,22 +46,22 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-settingswrap-item {
|
||||
.bd-settingswrap-button-big {
|
||||
.bd-settingswrapItem {
|
||||
.bd-settingswrapButtonBig {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bd-settingswrap-item-desc {
|
||||
.bd-settingswrapItemDesc {
|
||||
color: #72767d;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.bd-settingswrap-infobox {
|
||||
.bd-settingswrapInfobox {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background: rgba(32,34,37,.6);
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.bd-settingswrap-infobox-child {
|
||||
.bd-settingswrapInfoboxChild {
|
||||
background-size: 100% 100%;
|
||||
|
||||
.bd-wrapper {
|
||||
|
|
@ -110,14 +110,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-settingswrap-subheader {
|
||||
.bd-settingswrapSubheader {
|
||||
color: #f6f6f7;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bd-settingswrap-contents {
|
||||
.bd-settingswrapContents {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.bd-toast {
|
||||
position: relative;
|
||||
animation: bd-toast-up 300ms ease;
|
||||
animation: bd-toastUp 300ms ease;
|
||||
background: #36393F;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -25,28 +25,28 @@
|
|||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
|
||||
&.bd-toast-error {
|
||||
&.bd-toastError {
|
||||
background: #f04747;
|
||||
}
|
||||
|
||||
&.bd-toast-info {
|
||||
&.bd-toastInfo {
|
||||
background: #4a90e2;
|
||||
}
|
||||
|
||||
&.bd-toast-warning {
|
||||
&.bd-toastWarning {
|
||||
background: #FFA600;
|
||||
}
|
||||
|
||||
&.bd-toast-success {
|
||||
&.bd-toastSuccess {
|
||||
background: #43b581;
|
||||
}
|
||||
|
||||
&.bd-toast-has-icon {
|
||||
&.bd-toastHasIcon {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toast-icon {
|
||||
.bd-toastIcon {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
|
|
@ -63,6 +63,6 @@
|
|||
}
|
||||
|
||||
.bd-toast.bd-toast-closing {
|
||||
animation: bd-toast-down 300ms ease;
|
||||
animation: bd-toastDown 300ms ease;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ export default class {
|
|||
static initUiEvents() {
|
||||
const hideButtonSetting = Settings.getSetting('ui', 'default', 'hide-button');
|
||||
hideButtonSetting.on('setting-updated', event => {
|
||||
if (event.value) document.body.classList.add('bd-hide-button');
|
||||
else document.body.classList.remove('bd-hide-button');
|
||||
if (event.value) document.body.classList.add('bd-hideButton');
|
||||
else document.body.classList.remove('bd-hideButton');
|
||||
});
|
||||
if (hideButtonSetting.value) document.body.classList.add('bd-hide-button');
|
||||
if (hideButtonSetting.value) document.body.classList.add('bd-hideButton');
|
||||
|
||||
this.pathCache = {
|
||||
isDm: null,
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-modals-container">
|
||||
<div v-for="(modal, index) in modals.stack" :key="`bd-modal-${modal.id}`">
|
||||
<div class="bd-backdrop" :class="{'bd-backdrop-out': closing}" :style="{opacity: index === 0 ? undefined : 0}"></div>
|
||||
<div class="bd-modal-wrap" :style="{transform: `scale(${downscale(index + 1, 0.2)})`, opacity: downscale(index + 1, 1)}">
|
||||
<div class="bd-modal-close-area" @click="closeModal(modal)"></div>
|
||||
<div class="bd-modalsContainer">
|
||||
<div v-for="(modal, index) in modals.stack" :key="`bd-modal${modal.id}`">
|
||||
<div class="bd-backdrop" :class="{'bd-backdropOut': closing}" :style="{opacity: index === 0 ? undefined : 0}"></div>
|
||||
<div class="bd-modalWrap" :style="{transform: `scale(${downscale(index + 1, 0.2)})`, opacity: downscale(index + 1, 1)}">
|
||||
<div class="bd-modalCloseArea" @click="closeModal(modal)"></div>
|
||||
<keep-alive><component :is="modal.component" /></keep-alive>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,14 +44,14 @@
|
|||
}
|
||||
},
|
||||
created() {
|
||||
Events.on('bd-refresh-modals', this.eventListener = () => {
|
||||
Events.on('bd-refreshModals', this.eventListener = () => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
|
||||
window.addEventListener('keyup', this.keyupListener);
|
||||
},
|
||||
destroyed() {
|
||||
if (this.eventListener) Events.off('bd-refresh-modals', this.eventListener);
|
||||
if (this.eventListener) Events.off('bd-refreshModals', this.eventListener);
|
||||
window.removeEventListener('keyup', this.keyupListener);
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-settings" :class="{active, 'bd-settings-out': !item && animating}" @keyup="$emit('close')">
|
||||
<div class="bd-settings" :class="{active, 'bd-settingsOut': !item && animating}" @keyup="$emit('close')">
|
||||
<SidebarView :contentVisible="item" :animating="animating" :class="{'bd-stop': item}">
|
||||
<Sidebar slot="sidebar">
|
||||
<div class="bd-settings-x" @click="$emit('close')">
|
||||
<div class="bd-settings" @click="$emit('close')">
|
||||
<MiClose size="17"/>
|
||||
<span class="bd-x-text">ESC</span>
|
||||
<span class="bd-xText">ESC</span>
|
||||
</div>
|
||||
<template v-for="(category, text) in sidebar">
|
||||
<SidebarItem :item="{text, type: 'header'}" />
|
||||
|
|
@ -24,13 +24,13 @@
|
|||
|
||||
<div slot="sidebarfooter" class="bd-info">
|
||||
<span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
|
||||
<div @click="openGithub" v-tooltip="'GitHub'" class="bd-material-button">
|
||||
<div @click="openGithub" v-tooltip="'GitHub'" class="bd-materialButton">
|
||||
<MiGithubCircle size="16" />
|
||||
</div>
|
||||
<div @click="openTwitter" v-tooltip="'@Jiiksi'" class="bd-material-button">
|
||||
<div @click="openTwitter" v-tooltip="'@Jiiksi'" class="bd-materialButton">
|
||||
<MiTwitterCircle size="16" />
|
||||
</div>
|
||||
<div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
|
||||
<div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-materialButton">
|
||||
<MiWeb size="16" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,10 +122,10 @@
|
|||
}
|
||||
},
|
||||
created() {
|
||||
Events.on('bd-open-menu', this.openMenuHandler = item => item && this.itemOnClick(this.items.find(i => i === item || i.id === item || i.contentid === item || i.set === item).id));
|
||||
Events.on('bd-openMenu', this.openMenuHandler = item => item && this.itemOnClick(this.items.find(i => i === item || i.id === item || i.contentid === item || i.set === item).id));
|
||||
},
|
||||
destroyed() {
|
||||
if (this.openMenuHandler) Events.off('bd-open-menu', this.openMenuHandler);
|
||||
if (this.openMenuHandler) Events.off('bd-openMenu', this.openMenuHandler);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-settings-wrapper" :class="[{active}, 'platform-' + this.platform]">
|
||||
<div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating, 'bd-hide-button': hideButton}" @click="active = true">
|
||||
<div v-if="updating === 0" v-tooltip.right="'Checking for updates'" class="bd-settings-button-btn bd-loading"></div>
|
||||
<div v-else-if="updating === 2" v-tooltip.right="'Updates available!'" class="bd-settings-button-btn bd-updates"></div>
|
||||
<div v-else class="bd-settings-button-btn" :class="[{'bd-loading': !loaded}]"></div>
|
||||
<div class="bd-settingsWrapper" :class="[{active}, 'platform-' + this.platform]">
|
||||
<div class="bd-settingsButton" :class="{'bd-active': active, 'bd-animating': animating, 'bd-hide-button': hideButton}" @click="active = true">
|
||||
<div v-if="updating === 0" v-tooltip.right="'Checking for updates'" class="bd-settingsButtonBtn bd-loading"></div>
|
||||
<div v-else-if="updating === 2" v-tooltip.right="'Updates available!'" class="bd-settingsButtonBtn bd-updates"></div>
|
||||
<div v-else class="bd-settingsButtonBtn" :class="[{'bd-loading': !loaded}]"></div>
|
||||
</div>
|
||||
<BdSettings ref="settings" :active="active" @close="active = false" />
|
||||
</div>
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
},
|
||||
created() {
|
||||
Events.on('ready', this.eventHandlers.ready = e => this.loaded = true);
|
||||
Events.on('bd-open-menu', this.eventHandlers['bd-open-menu'] = item => this.active = true);
|
||||
Events.on('bd-close-menu', this.eventHandlers['bd-close-menu'] = () => this.active = false);
|
||||
Events.on('bd-openMenu', this.eventHandlers['bd-openMenu'] = item => this.active = true);
|
||||
Events.on('bd-closeMenu', this.eventHandlers['bd-closeMenu'] = () => this.active = false);
|
||||
Events.on('update-check-start', this.eventHandlers['update-check-start'] = e => this.updating = 0);
|
||||
Events.on('update-check-end', this.eventHandlers['update-check-end'] = e => this.updating = 1);
|
||||
Events.on('updates-available', this.eventHandlers['updates-available'] = e => this.updating = 2);
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-profile-badges" :class="[`bd-profile-badges-${type}`]" @click.stop>
|
||||
<div v-if="contributor.developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
|
||||
<div v-else-if="contributor.webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
|
||||
<div v-else-if="contributor.contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="click"></div>
|
||||
<div class="bd-profileBadges" :class="[`bd-profileBadges${type}`]" @click.stop>
|
||||
<div v-if="contributor.developer" v-tooltip="'BetterDiscord Developer'" class="bd-profileBadge bd-profileBadgeDeveloper" @click="click"></div>
|
||||
<div v-else-if="contributor.webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profileBadge bd-profileBadgeDeveloper" @click="click"></div>
|
||||
<div v-else-if="contributor.contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profileBadge bd-profileBadgeContributor" @click="click"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,18 +10,18 @@
|
|||
|
||||
<template>
|
||||
<div class="bd-card">
|
||||
<div class="bd-card-header">
|
||||
<div class="bd-card-icon" :style="{backgroundImage: iconURL}">
|
||||
<div class="bd-cardHeader">
|
||||
<div class="bd-cardIcon" :style="{backgroundImage: iconURL}">
|
||||
<MiExtension v-if="!item.icon" :size="30" />
|
||||
</div>
|
||||
<span>{{item.name}}</span>
|
||||
<div class="bd-flex-spacer" />
|
||||
<div class="bd-flexSpacer" />
|
||||
<slot name="toggle"/>
|
||||
</div>
|
||||
<div class="bd-card-body">
|
||||
<div class="bd-card-description">{{item.description}}</div>
|
||||
<div class="bd-card-footer">
|
||||
<div class="bd-card-extra">
|
||||
<div class="bd-cardBody">
|
||||
<div class="bd-cardDescription">{{item.description}}</div>
|
||||
<div class="bd-cardFooter">
|
||||
<div class="bd-cardExtra">
|
||||
v{{item.version}} by
|
||||
<template v-for="(author, i) in item.authors">
|
||||
<ContentAuthor :author="author" :after="i === item.authors.length - 1 ? '' : i === item.authors.length - 2 ? ' and' : ','" />
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
|
||||
<template>
|
||||
<SettingsWrapper headertext="Connectivity">
|
||||
<div class="bd-flex bd-flex-col bd-connectivityview">
|
||||
<div class="bd-settingswrap-item">
|
||||
<div v-if="connecting" class="bd-button bd-settingswrap-button-big bd-disabled">Connecting</div>
|
||||
<div v-else-if="!connected" class="bd-button bd-settingswrap-button-big" @click="showConnectWindow">Connect</div>
|
||||
<div v-else class="bd-settingswrap-infobox">
|
||||
<div class="bd-settingswrap-infobox-child" :style="{flex: '0 1 auto', backgroundImage: `url(${connectedUser.avatarUrl})`, width: '100px', height: '100px', borderRadius: '50%'}"></div>
|
||||
<div class="bd-settingswrap-infobox-child" :style="{flex: '1 1 auto', marginLeft: '10px'}">
|
||||
<div class="bd-flex bd-flexCol bd-connectivityview">
|
||||
<div class="bd-settingswrapItem">
|
||||
<div v-if="connecting" class="bd-button bd-settingswrapButtonBig bd-disabled">Connecting</div>
|
||||
<div v-else-if="!connected" class="bd-button bd-settingswrapButtonBig" @click="showConnectWindow">Connect</div>
|
||||
<div v-else class="bd-settingswrapInfobox">
|
||||
<div class="bd-settingswrapInfoboxChild" :style="{flex: '0 1 auto', backgroundImage: `url(${connectedUser.avatarUrl})`, width: '100px', height: '100px', borderRadius: '50%'}"></div>
|
||||
<div class="bd-settingswrapInfoboxChild" :style="{flex: '1 1 auto', marginLeft: '10px'}">
|
||||
<div class="bd-wrapper">
|
||||
<h5>Username</h5>
|
||||
<div>
|
||||
|
|
@ -31,9 +31,9 @@
|
|||
<div class="bd-button" :style="{height: '30px', borderRadius: '4px', padding: '0 5px'}" @click="disconnect">Disconnect</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-settingswrap-item">
|
||||
<h2 class="bd-settingswrap-subheader">BetterDiscord Connectivity</h2>
|
||||
<div class="bd-settingswrap-item-desc">
|
||||
<div class="bd-settingswrapItem">
|
||||
<h2 class="bd-settingswrapSubheader">BetterDiscord Connectivity</h2>
|
||||
<div class="bd-settingswrapItemDesc">
|
||||
Explanation for what connectivity is here.
|
||||
Explanation for what connectivity is here.
|
||||
Explanation for what connectivity is here.
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<v-popover class="bd-content-author bd-inline" popoverClass="bd-popover bd-content-author-links" trigger="click" placement="top" :disabled="!hasLinks">
|
||||
<span :class="{'bd-content-author-link': hasLinks}">{{ author.name || author }}</span><span v-text="after" @click.stop></span>
|
||||
<v-popover class="bd-contentAuthor bd-inline" popoverClass="bd-popover bd-contentAuthorLinks" trigger="click" placement="top" :disabled="!hasLinks">
|
||||
<span :class="{'bd-contentAuthorLink': hasLinks}">{{ author.name || author }}</span><span v-text="after" @click.stop></span>
|
||||
|
||||
<template slot="popover">
|
||||
<div v-if="author.discord_id" @click="openUserProfileModal(author.discord_id)" v-tooltip="author.discord_username || author.name" class="bd-material-button"><MiDiscord size="16" /></div>
|
||||
<div v-if="author.github_username" @click="openGitHub" v-tooltip="author.github_username" class="bd-material-button"><MiGithubCircle size="16" /></div>
|
||||
<div v-if="author.twitter_username" @click="openTwitter" v-tooltip="'@' + author.twitter_username" class="bd-material-button"><MiTwitterCircle size="16" /></div>
|
||||
<div v-if="author.url" @click="openWebsite" v-tooltip="author.url" class="bd-material-button"><MiWeb size="16" /></div>
|
||||
<div v-if="author.discord_id" @click="openUserProfileModal(author.discord_id)" v-tooltip="author.discord_username || author.name" class="bd-materialButton"><MiDiscord size="16" /></div>
|
||||
<div v-if="author.github_username" @click="openGitHub" v-tooltip="author.github_username" class="bd-materialButton"><MiGithubCircle size="16" /></div>
|
||||
<div v-if="author.twitter_username" @click="openTwitter" v-tooltip="'@' + author.twitter_username" class="bd-materialButton"><MiTwitterCircle size="16" /></div>
|
||||
<div v-if="author.url" @click="openWebsite" v-tooltip="author.url" class="bd-materialButton"><MiWeb size="16" /></div>
|
||||
</template>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,34 +10,34 @@
|
|||
|
||||
<template>
|
||||
<SettingsWrapper headertext="CSS Editor">
|
||||
<div class="bd-css-editor">
|
||||
<div v-if="error" class="bd-form-item">
|
||||
<div class="bd-cssEditor">
|
||||
<div v-if="error" class="bd-formItem">
|
||||
<h5 style="margin-bottom: 10px;">Compiler error</h5>
|
||||
<div class="bd-err bd-pre-wrap"><div class="bd-pre">{{ error.formatted }}</div></div>
|
||||
<div class="bd-form-divider"></div>
|
||||
<div class="bd-err bd-preWrap"><div class="bd-pre">{{ error.formatted }}</div></div>
|
||||
<div class="bd-formDivider"></div>
|
||||
</div>
|
||||
|
||||
<div class="bd-form-item">
|
||||
<div class="bd-formItem">
|
||||
<h5>Custom Editor</h5>
|
||||
<FormButton v-if="internalEditorIsInstalled" @click="openInternalEditor">Open</FormButton>
|
||||
<template v-else>
|
||||
<div class="bd-form-warning">
|
||||
<div class="bd-formWarning">
|
||||
<div class="bd-text">Custom Editor is not installed!</div>
|
||||
<FormButton>Install</FormButton>
|
||||
</div>
|
||||
<span style="color: #fff; font-size: 12px; font-weight: 700;">* This is displayed if editor is not installed</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="bd-form-divider"></div>
|
||||
<div class="bd-formDivider"></div>
|
||||
|
||||
<div class="bd-form-item">
|
||||
<div class="bd-formItem">
|
||||
<h5>System Editor</h5>
|
||||
<FormButton @click="openSystemEditor">Open</FormButton>
|
||||
<p class="bd-hint">This will open {{ systemEditorPath }} in your system's default editor.</p>
|
||||
</div>
|
||||
<div class="bd-form-divider"></div>
|
||||
<div class="bd-formDivider"></div>
|
||||
|
||||
<div class="bd-form-item">
|
||||
<div class="bd-formItem">
|
||||
<h5 style="margin-bottom: 10px;">Settings</h5>
|
||||
</div>
|
||||
<SettingsPanel :settings="settingsset" />
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-flex bd-flex-col bd-pluginsview">
|
||||
<div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">
|
||||
<div class="bd-flex bd-flexCol bd-pluginsview">
|
||||
<div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-pluginsContainer bd-localPlugins">
|
||||
<PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :data-plugin-id="plugin.id" @toggle-plugin="togglePlugin(plugin)" @reload-plugin="reloadPlugin(plugin)" @delete-plugin="unload => deletePlugin(plugin, unload)" @show-settings="dont_clone => showSettings(plugin, dont_clone)" />
|
||||
</div>
|
||||
<div v-if="!local" class="bd-online-ph">
|
||||
<div v-if="!local" class="bd-onlinePh">
|
||||
<h3>Coming Soon</h3>
|
||||
<a href="https://v2.betterdiscord.net/plugins" target="_new">Website Browser</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,22 +11,22 @@
|
|||
<template>
|
||||
<div class="bd-remoteCard">
|
||||
<div class="bd-flexRow bd-flex">
|
||||
<div class="bd-remoteCard-title bd-flexGrow">{{item.name}} v{{item.version}} by {{item.author}}</div>
|
||||
<div class="bd-remoteCard-likes">{{item.rating}}</div>
|
||||
<div class="bd-remoteCardTitle bd-flexGrow">{{item.name}} v{{item.version}} by {{item.author}}</div>
|
||||
<div class="bd-remoteCardLikes">{{item.rating}}</div>
|
||||
</div>
|
||||
<div class="bd-flexRow bd-flex" :style="{marginTop: '10px'}">
|
||||
<div class="bd-remoteCard-thumb" :style="{backgroundImage: `url(${resolveThumb()})`}"></div>
|
||||
<div class="bd-remoteCard-infoContainer bd-flex bd-flexCol bd-flexGrow">
|
||||
<div class="bd-remoteCard-infoBox bd-flex bd-flexGrow bd-flexCol">
|
||||
<div class="bd-remoteCard-info">{{item.installs}} Installs</div>
|
||||
<div class="bd-remoteCard-info">{{item.activeUsers}} Active Users</div>
|
||||
<div class="bd-remoteCard-info">Updated: Some time ago</div>
|
||||
<div class="bd-remoteCardThumb" :style="{backgroundImage: `url(${resolveThumb()})`}"></div>
|
||||
<div class="bd-remoteCardInfoContainer bd-flex bd-flexCol bd-flexGrow">
|
||||
<div class="bd-remoteCardInfoBox bd-flex bd-flexGrow bd-flexCol">
|
||||
<div class="bd-remoteCardInfo">{{item.installs}} Installs</div>
|
||||
<div class="bd-remoteCardInfo">{{item.activeUsers}} Active Users</div>
|
||||
<div class="bd-remoteCardInfo">Updated: Some time ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-flexRow bd-flex bd-flexGrow">
|
||||
<div class="bd-flexGrow bd-remoteCard-tags">{{item.tags.join(', ')}}</div>
|
||||
<div class="bd-button-group">
|
||||
<div class="bd-flexGrow bd-remoteCardTags">{{item.tags.join(', ')}}</div>
|
||||
<div class="bd-buttonGroup">
|
||||
<div class="bd-button">Install</div>
|
||||
<div class="bd-button">Preview</div>
|
||||
<div class="bd-button">Source</div>
|
||||
|
|
|
|||
|
|
@ -9,22 +9,22 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-settings-panel">
|
||||
<div class="bd-settings-schemes" v-if="schemes && schemes.length">
|
||||
<div class="bd-settings-schemes-container">
|
||||
<div class="bd-settingsPanel">
|
||||
<div class="bd-settingsSchemes" v-if="schemes && schemes.length">
|
||||
<div class="bd-settingsSchemesContainer">
|
||||
<SettingsScheme v-for="scheme in schemes" :key="scheme.id" :scheme="scheme" :is-active="scheme.isActive(settings)" @apply="scheme.applyTo(settings)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-settings-categories">
|
||||
<div class="bd-settingsCategories">
|
||||
<template v-for="category in settings.categories">
|
||||
<div class="bd-settings-category">
|
||||
<div class="bd-settingsCategory">
|
||||
<div v-if="category.category === 'default' || !category.type">
|
||||
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" />
|
||||
</div>
|
||||
<div class="bd-settings-static" v-else-if="category.type === 'static'">
|
||||
<div class="bd-form-header">
|
||||
<span class="bd-form-header-text">{{ category.category_name }}</span>
|
||||
<div class="bd-settingsStatic" v-else-if="category.type === 'static'">
|
||||
<div class="bd-formHeader">
|
||||
<span class="bd-formHeaderText">{{ category.category_name }}</span>
|
||||
</div>
|
||||
<Setting v-for="setting in category.settings" :key="setting.id" :setting="setting" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-settings-scheme" :class="{'bd-active': isActive}" @click="$emit('apply')">
|
||||
<div class="bd-settings-scheme-icon" :style="{'background-image': iconURL}"></div>
|
||||
<div class="bd-settings-scheme-name" v-if="scheme.name">{{ scheme.name }}</div>
|
||||
<div class="bd-settings-scheme-hint" v-if="scheme.hint">{{ scheme.hint }}</div>
|
||||
<div class="bd-settingsScheme" :class="{'bd-active': isActive}" @click="$emit('apply')">
|
||||
<div class="bd-settingsSchemeIcon" :style="{'background-image': iconURL}"></div>
|
||||
<div class="bd-settingsSchemeName" v-if="scheme.name">{{ scheme.name }}</div>
|
||||
<div class="bd-settingsSchemeHint" v-if="scheme.hint">{{ scheme.hint }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
<template>
|
||||
<div class="bd-settingswrap">
|
||||
<ScrollerWrap>
|
||||
<div class="bd-settingswrap-header">
|
||||
<span class="bd-settingswrap-header-text">{{ headertext }}</span>
|
||||
<div class="bd-settingswrapHeader">
|
||||
<span class="bd-settingswrapHeaderText">{{ headertext }}</span>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<div class="bd-settingswrap-contents">
|
||||
<div class="bd-settingswrapContents">
|
||||
<slot />
|
||||
</div>
|
||||
</ScrollerWrap>
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-flex bd-flex-col bd-themesview">
|
||||
<div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-themes-container bd-local-themes">
|
||||
<div class="bd-flex bd-flexCol bd-themesview">
|
||||
<div v-if="local" class="bd-flex bd-flexGrow bd-flexCol bd-themesContainer bd-localThemes">
|
||||
<ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
|
||||
</div>
|
||||
<div v-if="!local" class="bd-online-ph">
|
||||
<div v-if="!local" class="bd-onlinePh">
|
||||
<div class="bd-fancySearch" :class="{'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
|
||||
<input type="text" class="bd-textInput" @keydown.enter="searchInput" @keyup.stop/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
|
||||
<template>
|
||||
<SettingsWrapper headertext="Updates">
|
||||
<div class="bd-flex bd-flex-col bd-updaterview">
|
||||
<div v-if="error" class="bd-form-item">
|
||||
<div class="bd-flex bd-flexCol bd-updaterview">
|
||||
<div v-if="error" class="bd-formItem">
|
||||
<h5 style="margin-bottom: 10px;">Error installing updates</h5>
|
||||
<div class="bd-err bd-pre-wrap"><div class="bd-pre">{{ error.formatted }}</div></div>
|
||||
<div class="bd-form-divider"></div>
|
||||
<div class="bd-err bd-preWrap"><div class="bd-pre">{{ error.formatted }}</div></div>
|
||||
<div class="bd-formDivider"></div>
|
||||
</div>
|
||||
|
||||
<template v-if="updatesAvailable">
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-window-preferences">
|
||||
<div v-if="disabled" class="bd-form-item bd-window-preferences-disabled">
|
||||
<div class="bd-windowPreferences">
|
||||
<div v-if="disabled" class="bd-formItem bd-windowPreferencesDisabled">
|
||||
<p>You can't edit your window preferences here as you are using a JavaScript file to set window preferences.</p>
|
||||
<FormButton @click="openFile">Open</FormButton>
|
||||
<p class="bd-hint">This will open {{ filePath }} in your system's default editor.</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="settingsSet" class="bd-form-item">
|
||||
<div v-else-if="settingsSet" class="bd-formItem">
|
||||
<SettingsPanel :settings="settingsSet" />
|
||||
|
||||
<p class="bd-hint">You must fully restart Discord for changes here to take effect.</p>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modal-basic-body">{{ modal.text }}</div>
|
||||
<div slot="footer" class="bd-modal-controls">
|
||||
<div class="bd-flex-grow"></div>
|
||||
<Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modalBasicBody">{{ modal.text }}</div>
|
||||
<div slot="footer" class="bd-modalControls">
|
||||
<div class="bd-flexGrow"></div>
|
||||
<div class="bd-button bd-ok" @click="modal.close">OK</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modal-basic-body">{{ modal.text }}</div>
|
||||
<div slot="footer" class="bd-modal-controls">
|
||||
<div class="bd-flex-grow"></div>
|
||||
<Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modalBasicBody">{{ modal.text }}</div>
|
||||
<div slot="footer" class="bd-modalControls">
|
||||
<div class="bd-flexGrow"></div>
|
||||
<div class="bd-button" @click="modal.close">{{ modal.cancelText || 'Cancel' }}</div>
|
||||
<div class="bd-button bd-ok" @click="() => { modal.confirm(); modal.close(); }">{{ modal.confirmText || 'OK' }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,23 +4,23 @@
|
|||
<MiError v-if="modal.event.type === 'err'" slot="icon" size="20"/>
|
||||
<div slot="body">
|
||||
<div v-for="(content, index) in modal.event.content">
|
||||
<div class="bd-modal-error" :class="{'bd-open': content.showStack}">
|
||||
<div class="bd-modal-error-title bd-flex">
|
||||
<span class="bd-modal-title-text bd-flex-grow">{{content.message}}</span>
|
||||
<span class="bd-modal-titlelink" v-if="content.showStack" @click="() => { content.showStack = false; $forceUpdate(); }">Hide Stacktrace</span>
|
||||
<span class="bd-modal-titlelink" v-else @click="() => { content.showStack = true; $forceUpdate(); }">Show Stacktrace</span>
|
||||
<div class="bd-modalError" :class="{'bd-open': content.showStack}">
|
||||
<div class="bd-modalErrorTitle bd-flex">
|
||||
<span class="bd-modalTitleText bd-flexGrow">{{content.message}}</span>
|
||||
<span class="bd-modalTitlelink" v-if="content.showStack" @click="() => { content.showStack = false; $forceUpdate(); }">Hide Stacktrace</span>
|
||||
<span class="bd-modalTitlelink" v-else @click="() => { content.showStack = true; $forceUpdate(); }">Show Stacktrace</span>
|
||||
</div>
|
||||
<div class="bd-scroller-wrap">
|
||||
<div class="bd-scrollerWrap">
|
||||
<div class="bd-scroller">
|
||||
<div class="bd-modal-error-body"><span>{{content.err.message}}</span>
|
||||
<div class="bd-modalErrorBody"><span>{{content.err.message}}</span>
|
||||
{{content.stackTrace}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="bd-modal-controls">
|
||||
<span class="bd-modal-tip">Press {{ platformInspectorKey }} for more details</span>
|
||||
<div slot="footer" class="bd-modalControls">
|
||||
<span class="bd-modalTip">Press {{ platformInspectorKey }} for more details</span>
|
||||
<div class="bd-button bd-ok" @click="modal.close">OK</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modal-basic-body bd-inputModalBody bd-form-textinput">
|
||||
<Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modalBasicBody bd-inputModalBody bd-formTextinput">
|
||||
{{ modal.text }}
|
||||
<input v-if="modal.password" ref="input" type="password" @keyup.stop="keyup" />
|
||||
<input v-else ref="input" type="text" @keyup.stop="keyup"/>
|
||||
</div>
|
||||
<div slot="footer" class="bd-modal-controls">
|
||||
<div class="bd-flex-grow"></div>
|
||||
<div slot="footer" class="bd-modalControls">
|
||||
<div class="bd-flexGrow"></div>
|
||||
<div class="bd-button bd-ok" @click="() => { modal.confirm(value); modal.close(); }">OK</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -9,22 +9,22 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modal-basic-body">
|
||||
<div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-perm-scope">
|
||||
<div class="bd-perm-allow">
|
||||
<div class="bd-perm-check">
|
||||
<div class="bd-perm-check-inner"></div>
|
||||
<Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
|
||||
<div slot="body" class="bd-modalBasicBody">
|
||||
<div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-permScope">
|
||||
<div class="bd-permAllow">
|
||||
<div class="bd-permCheck">
|
||||
<div class="bd-permCheckInner"></div>
|
||||
</div>
|
||||
<div class="bd-perm-inner">
|
||||
<div class="bd-perm-name">{{perm.HEADER}}</div>
|
||||
<div class="bd-perm-desc">{{perm.BODY}}</div>
|
||||
<div class="bd-permInner">
|
||||
<div class="bd-permName">{{perm.HEADER}}</div>
|
||||
<div class="bd-permDesc">{{perm.BODY}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="bd-modal-controls">
|
||||
<div class="bd-flex-grow"></div>
|
||||
<div slot="footer" class="bd-modalControls">
|
||||
<div class="bd-flexGrow"></div>
|
||||
<div class="bd-button" @click="modal.close">Cancel</div>
|
||||
<div class="bd-button bd-ok" @click="() => { modal.confirm(); modal.close(); }">Authorize</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-settings-modal" :class="{'bd-edited': changed}">
|
||||
<Modal :class="{'bd-modal-out': modal.closing}" :headerText="modal.headertext" @close="modal.close">
|
||||
<SettingsPanel :settings="settings" :schemes="modal.schemes" slot="body" class="bd-settings-modal-body" />
|
||||
<div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed || saving, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
|
||||
<div class="bd-footer-alert-text">Unsaved changes</div>
|
||||
<div class="bd-button bd-reset-button bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>
|
||||
<div class="bd-settingsModal" :class="{'bd-edited': changed}">
|
||||
<Modal :class="{'bd-modalOut': modal.closing}" :headerText="modal.headertext" @close="modal.close">
|
||||
<SettingsPanel :settings="settings" :schemes="modal.schemes" slot="body" class="bd-settingsModalBody" />
|
||||
<div slot="footer" class="bd-footerAlert" :class="{'bd-active': changed || saving, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
|
||||
<div class="bd-footerAlertText">Unsaved changes</div>
|
||||
<div class="bd-button bd-resetButton bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>
|
||||
<div class="bd-button bd-ok" :class="{'bd-disabled': saving}" @click="saveSettings">
|
||||
<div v-if="saving" class="bd-spinner-7"></div>
|
||||
<div v-if="saving" class="bd-spinner7"></div>
|
||||
<template v-else>Save Changes</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,26 +9,26 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-settingsarray" :class="{'bd-form-settingsarray-inline': setting.inline}">
|
||||
<div class="bd-formSettingsarray" :class="{'bd-formSettingsarrayInline': setting.inline}">
|
||||
<div class="bd-title">
|
||||
<h3>{{ setting.text }}</h3>
|
||||
<button class="bd-button bd-button-primary" :class="{'bd-disabled': setting.disabled || setting.max && setting.items.length >= setting.max}" @click="() => addItem(!setting.inline)">Add</button>
|
||||
<button class="bd-button bd-buttonPrimary" :class="{'bd-disabled': setting.disabled || setting.max && setting.items.length >= setting.max}" @click="() => addItem(!setting.inline)">Add</button>
|
||||
</div>
|
||||
<div class="bd-hint">{{ setting.hint }}</div>
|
||||
<div class="bd-settingsarray-items">
|
||||
<div class="bd-settingsarray-item" v-for="(item, index) in setting.items">
|
||||
<div class="bd-settingsarray-item-marker">{{ index + 1 }}</div>
|
||||
<div class="bd-settingsarrayItems">
|
||||
<div class="bd-settingsarrayItem" v-for="(item, index) in setting.items">
|
||||
<div class="bd-settingsarrayItemMarker">{{ index + 1 }}</div>
|
||||
|
||||
<SettingsPanel class="bd-settingsarray-item-contents" v-if="setting.inline" :settings="item" />
|
||||
<div class="bd-settingsarray-item-contents" v-else>
|
||||
<div class="bd-settingsarray-item-hint">
|
||||
<SettingsPanel class="bd-settingsarrayItemContents" v-if="setting.inline" :settings="item" />
|
||||
<div class="bd-settingsarrayItemContents" v-else>
|
||||
<div class="bd-settingsarrayItemHint">
|
||||
<span v-if="getItemSettings(item)[0]">{{ getItemSettings(item)[0].text }}: {{ getItemSettings(item)[0].value }}</span><span v-if="getItemSettings(item)[1]">, {{ getItemSettings(item)[1].text }}: {{ getItemSettings(item)[1].value }}</span><span v-if="getItemSettings(item)[2]">, ...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-settingsarray-item-controls">
|
||||
<span class="bd-settingsarray-open" v-if="setting.allow_external" @click="() => showModal(item, index)"><MiOpenInNew v-if="setting.inline" /><MiSettings v-else /></span>
|
||||
<span class="bd-settingsarray-remove" :class="{'bd-disabled': setting.disabled || setting.min && setting.items.length <= setting.min}" @click="() => removeItem(item)"><MiMinus /></span>
|
||||
<div class="bd-settingsarrayItemControls">
|
||||
<span class="bd-settingsarrayOpen" v-if="setting.allow_external" @click="() => showModal(item, index)"><MiOpenInNew v-if="setting.inline" /><MiSettings v-else /></span>
|
||||
<span class="bd-settingsarrayRemove" :class="{'bd-disabled': setting.disabled || setting.min && setting.items.length <= setting.min}" @click="() => removeItem(item)"><MiMinus /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-setting-switch">
|
||||
<div class="bd-settingSwitch">
|
||||
<div class="bd-title">
|
||||
<h3>{{setting.text}}</h3>
|
||||
<SettingSwitch v-model="setting.value" />
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-colourpicker">
|
||||
<div class="bd-formColourpicker">
|
||||
<div class="bd-title">
|
||||
<h3 v-if="setting.text">{{setting.text}}</h3>
|
||||
<div class="bd-colourpicker-wrapper">
|
||||
<button ref="swatch" class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open" />
|
||||
<div class="bd-colourpickerWrapper">
|
||||
<button ref="swatch" class="bd-colourpickerSwatch" :style="{backgroundColor: rgbaString}" @click="open = !open" />
|
||||
</div>
|
||||
</div>
|
||||
<Picker ref="picker" v-model="colours" @input="pick" :class="{'bd-hide': !open}" :style="{top: topOffset}" />
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-customsetting" :class="{'bd-form-customsetting-debug': setting.debug}">
|
||||
<div class="bd-formCustomsetting" :class="{'bd-formCustomsettingDebug': setting.debug}">
|
||||
<component :is="component" :setting="setting" :change="change"></component>
|
||||
<Drawer class="bd-form-customsetting-value bd-form-textarea" label="Custom setting data" v-if="setting.debug">
|
||||
<pre class="bd-pre-wrap"><div class="bd-pre">{{ JSON.stringify(setting, null, 4) }}</div></pre>
|
||||
<Drawer class="bd-formCustomsettingValue bd-formTextarea" label="Custom setting data" v-if="setting.debug">
|
||||
<pre class="bd-preWrap"><div class="bd-pre">{{ JSON.stringify(setting, null, 4) }}</div></pre>
|
||||
|
||||
<div class="bd-form-textarea-details">
|
||||
<div class="bd-formTextareaDetails">
|
||||
<div class="bd-title">
|
||||
<h3>Set value</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-dropdown">
|
||||
<div class="bd-formDropdown">
|
||||
<div class="bd-title">
|
||||
<h3 v-if="setting.text">{{setting.text}}</h3>
|
||||
<Dropdown v-if="!setting.fullwidth" :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
|
||||
|
|
|
|||
|
|
@ -9,19 +9,19 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-fileinput">
|
||||
<div class="bd-formFileinput">
|
||||
<div class="bd-title">
|
||||
<h3>{{ setting.text }}</h3>
|
||||
<button class="bd-button bd-button-primary" :class="{'bd-disabled': setting.disabled}" @click="openDialog">Select</button>
|
||||
<button class="bd-button bd-buttonPrimary" :class="{'bd-disabled': setting.disabled}" @click="openDialog">Select</button>
|
||||
</div>
|
||||
<div class="bd-hint">{{ setting.hint }}</div>
|
||||
<div class="bd-selected-files">
|
||||
<div class="bd-selected-file" v-for="file_path in setting.value">
|
||||
<div class="bd-selectedFiles">
|
||||
<div class="bd-selectedFile" v-for="file_path in setting.value">
|
||||
<!-- Maybe add a preview here later? -->
|
||||
<!-- For now just show the selected file path -->
|
||||
<span class="bd-file-path">{{ file_path }}</span>
|
||||
<span class="bd-file-open" @click="openItem(file_path)"><MiOpenInNew /></span>
|
||||
<span class="bd-file-remove" :class="{'bd-disabled': setting.disabled}" @click="removeItem(file_path)"><MiMinus /></span>
|
||||
<span class="bd-filePath">{{ file_path }}</span>
|
||||
<span class="bd-fileOpen" @click="openItem(file_path)"><MiOpenInNew /></span>
|
||||
<span class="bd-fileRemove" :class="{'bd-disabled': setting.disabled}" @click="removeItem(file_path)"><MiMinus /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
async openDialog(e) {
|
||||
if (this.setting.disabled) return;
|
||||
|
||||
const filenames = await ClientIPC.send('bd-native-open', this.setting.dialogOptions);
|
||||
const filenames = await ClientIPC.send('bd-nativeOpen', this.setting.dialogOptions);
|
||||
if (filenames)
|
||||
this.setting.value = filenames;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-guildinput">
|
||||
<div class="bd-formGuildinput">
|
||||
<div class="bd-title">
|
||||
<h3>{{ setting.text }}</h3>
|
||||
</div>
|
||||
<div class="bd-hint">{{ setting.hint }}</div>
|
||||
<div class="bd-guilds">
|
||||
<div class="bd-guild" :class="{'bd-active': isGuildSelected(guild), 'bd-guild-has-icon': guild.icon}" :style="{backgroundImage: `url('${getGuildIconURL(guild)}')`}" @click="() => isGuildSelected(guild) ? unselectGuild(guild) : selectGuild(guild)" v-for="guild in guilds" v-if="guild" v-tooltip="guild.name">
|
||||
<div class="bd-guild-text" v-if="!guild.icon">{{ getGuildIconText(guild) }}</div>
|
||||
<div class="bd-guildText" v-if="!guild.icon">{{ getGuildIconText(guild) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-keybind">
|
||||
<div class="bd-form-keybind-details">
|
||||
<div class="bd-formKeybind">
|
||||
<div class="bd-formKeybindDetails">
|
||||
<div class="bd-title">
|
||||
<h3>{{ setting.text }}</h3>
|
||||
</div>
|
||||
<div class="bd-hint">{{ setting.hint }}</div>
|
||||
</div>
|
||||
<div class="bd-keybind" :class="{'bd-active': active, 'bd-disabled': setting.disabled, 'bd-keybind-unset': !setting.value}">
|
||||
<div class="bd-keybind-selected">{{ selected || 'No Keybind Set' }}</div>
|
||||
<div class="bd-keybindSelected">{{ selected || 'No Keybind Set' }}</div>
|
||||
<button class="bd-button" v-tooltip="`Click to record a new keybind sequence${setting.value ? ' (shift + click to delete the sequence)' : ''}`" @click="$event.shiftKey ? deleteKeybind() : toggleActive(); $event.target.blur()">{{ active ? 'Stop Recording' : setting.value ? 'Edit Keybind' : 'Record Keybind' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-textarea">
|
||||
<div class="bd-form-textarea-details">
|
||||
<div class="bd-formTextarea">
|
||||
<div class="bd-formTextareaDetails">
|
||||
<div class="bd-title">
|
||||
<h3>{{ setting.text }}</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-numberinput">
|
||||
<div class="bd-formNumberinput">
|
||||
<div class="bd-title">
|
||||
<h3 v-if="setting.text">{{setting.text}}</h3>
|
||||
<div class="bd-number">
|
||||
<input type="number" :value="setting.value / setting.multi" :min="setting.min" :max="setting.max" :step="setting.step" @keyup.stop @input="input" />
|
||||
<div class="bd-number-spinner bd-flex bd-flex-col">
|
||||
<div class="bd-arrow" @click="changeBy(1)"><div class="bd-up-arrow"></div></div>
|
||||
<div class="bd-arrow" @click="changeBy(-1)"><div class="bd-down-arrow"></div></div>
|
||||
<div class="bd-numberSpinner bd-flex bd-flexCol">
|
||||
<div class="bd-arrow" @click="changeBy(1)"><div class="bd-upArrow"></div></div>
|
||||
<div class="bd-arrow" @click="changeBy(-1)"><div class="bd-downArrow"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-radio">
|
||||
<div class="bd-form-radio-details">
|
||||
<div class="bd-formRadio">
|
||||
<div class="bd-formRadioDetails">
|
||||
<div class="bd-title">
|
||||
<h3>{{setting.text}}</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-item" :class="{'bd-form-item-changed': setting.changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
|
||||
<div class="bd-formItem" :class="{'bd-formItemChanged': setting.changed, 'bd-disabled': disabled, 'bd-formItem-noheader': !setting.text, 'bd-formItem-fullwidth': setting.fullwidth}">
|
||||
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" />
|
||||
<StringSetting v-else-if="setting.type === 'text' && !setting.multiline" :setting="setting" />
|
||||
<MultilineTextSetting v-else-if="setting.type === 'text' && setting.multiline" :setting="setting" />
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<SecureKeyValuePair v-else-if="setting.type === 'securekvp'" :setting="setting" />
|
||||
<CustomSetting v-else-if="setting.type === 'custom'" :setting="setting" />
|
||||
|
||||
<div v-if="!hideDivider" class="bd-form-divider"></div>
|
||||
<div v-if="!hideDivider" class="bd-formDivider"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,19 +9,19 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-slider" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
|
||||
<div class="bd-formSlider" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
|
||||
<div class="bd-title">
|
||||
<h3>{{ setting.text }}</h3>
|
||||
<div class="bd-slider">
|
||||
<div class="bd-slider-container">
|
||||
<div class="bd-slider-points">
|
||||
<div class="bd-slider-point" v-for="(label, point) in setting.points" :style="{left: `${getPointPosition(point) * 100}%`}">{{ label }}</div>
|
||||
<div class="bd-sliderContainer">
|
||||
<div class="bd-sliderPoints">
|
||||
<div class="bd-sliderPoint" v-for="(label, point) in setting.points" :style="{left: `${getPointPosition(point) * 100}%`}">{{ label }}</div>
|
||||
</div>
|
||||
<div class="bd-slider-bar">
|
||||
<div class="bd-slider-bar-filled" :style="{width: `${getPointPosition() * 100}%`}"></div>
|
||||
<div class="bd-sliderBar">
|
||||
<div class="bd-sliderBarFilled" :style="{width: `${getPointPosition() * 100}%`}"></div>
|
||||
</div>
|
||||
<div class="bd-slider-thumb-wrap">
|
||||
<div class="bd-slider-thumb" v-tooltip="{content: (value || '0') + setting.unit, show: tooltip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
|
||||
<div class="bd-sliderThumbWrap">
|
||||
<div class="bd-sliderThumb" v-tooltip="{content: (value || '0') + setting.unit, show: tooltip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
|
||||
</div>
|
||||
<input type="range" :value="value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-textinput">
|
||||
<div class="bd-formTextinput">
|
||||
<div class="bd-title">
|
||||
<h3 v-if="setting.text">{{setting.text}}</h3>
|
||||
<div class="bd-textinput-wrapper">
|
||||
<div class="bd-textinputWrapper">
|
||||
<input type="text" v-model="setting.value" @keyup.stop />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,21 +10,21 @@
|
|||
|
||||
<template>
|
||||
<div class="bd-autocomplete" :class="{'bd-active': emotes && emotes.length}">
|
||||
<div v-if="emotes && emotes.length" class="bd-autocomplete-inner">
|
||||
<div class="bd-autocomplete-row">
|
||||
<div class="bd-autocomplete-selector">
|
||||
<div class="bd-autocomplete-title">
|
||||
<div v-if="emotes && emotes.length" class="bd-autocompleteInner">
|
||||
<div class="bd-autocompleteRow">
|
||||
<div class="bd-autocompleteSelector">
|
||||
<div class="bd-autocompleteTitle">
|
||||
Emotes Matching:
|
||||
<strong>{{title}}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(emote, index) in emotes" class="bd-autocomplete-row" :key="index">
|
||||
<div class="bd-autocomplete-selector bd-selectable" :class="{'bd-selected': index === selectedIndex, 'bd-emote-favourite': isFavourite(emote)}" @mouseover="selected = emote.id" @click="inject(emote)">
|
||||
<div class="bd-autocomplete-field">
|
||||
<div v-for="(emote, index) in emotes" class="bd-autocompleteRow" :key="index">
|
||||
<div class="bd-autocompleteSelector bd-selectable" :class="{'bd-selected': index === selectedIndex, 'bd-emote-favourite': isFavourite(emote)}" @mouseover="selected = emote.id" @click="inject(emote)">
|
||||
<div class="bd-autocompleteField">
|
||||
<img :src="emote.src" :alt="emote.name" />
|
||||
<div class="bd-flex-grow">{{emote.id}}</div>
|
||||
<div class="bd-emote-favourite-button" :class="{'bd-active': isFavourite(emote)}" @click.stop="toggleFavourite(emote)">
|
||||
<div class="bd-flexGrow">{{emote.id}}</div>
|
||||
<div class="bd-emoteFavouriteButton" :class="{'bd-active': isFavourite(emote)}" @click.stop="toggleFavourite(emote)">
|
||||
<MiStar :size="16" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<template>
|
||||
<div class="bd-button" :class="[{'bd-disabled': disabled}, {'bd-err': type === 'err'}]" @click="!disabled && !loading ? $emit('click', $event) : null">
|
||||
<div v-if="loading" class="bd-spinner-7"></div>
|
||||
<div v-if="loading" class="bd-spinner7"></div>
|
||||
<slot v-else />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-button-group">
|
||||
<div class="bd-buttonGroup">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@
|
|||
|
||||
<template>
|
||||
<div :class="['bd-drawer', {'bd-drawer-open': open, 'bd-animating': animating}]">
|
||||
<div class="bd-form-header bd-drawer-header" @click="() => open = !open">
|
||||
<span class="bd-form-header-text">{{ label }}</span>
|
||||
<span class="bd-form-header-button bd-drawer-open-button">
|
||||
<span class="bd-chevron-1"><MiChevronDown /></span>
|
||||
<span class="bd-chevron-2"><MiChevronDown /></span>
|
||||
<div class="bd-formHeader bd-drawerHeader" @click="() => open = !open">
|
||||
<span class="bd-formHeaderText">{{ label }}</span>
|
||||
<span class="bd-formHeaderButton bd-drawerOpenButton">
|
||||
<span class="bd-chevron1"><MiChevronDown /></span>
|
||||
<span class="bd-chevron2"><MiChevronDown /></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bd-drawer-contents-wrap">
|
||||
<div class="bd-drawer-contents" ref="contents">
|
||||
<div class="bd-drawerContentsWrap">
|
||||
<div class="bd-drawerContents" ref="contents">
|
||||
<slot v-if="open || animating" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
|
||||
<template>
|
||||
<div class="bd-dropdown" :class="{'bd-active': active, 'bd-disabled': disabled}">
|
||||
<div class="bd-dropdown-current" @click="() => active = !active && !disabled">
|
||||
<span class="bd-dropdown-text">{{ getSelectedText() }}</span>
|
||||
<span class="bd-dropdown-arrow-wrap">
|
||||
<span class="bd-dropdown-arrow"></span>
|
||||
<div class="bd-dropdownCurrent" @click="() => active = !active && !disabled">
|
||||
<span class="bd-dropdownText">{{ getSelectedText() }}</span>
|
||||
<span class="bd-dropdownArrowWrap">
|
||||
<span class="bd-dropdownArrow"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
|
||||
<div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': value === option.value}" @click="select(option)">{{ option.text }}</div>
|
||||
<div class="bd-dropdownOptions bd-flex bd-flexCol" ref="options" v-if="active">
|
||||
<div class="bd-dropdownOption" v-for="option in options" :class="{'bd-dropdownOptionSelected': value === option.value}" @click="select(option)">{{ option.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue