Tidied SCSS files
Organised SCSS files for the client, moved all styles still in a Vue file to an SCSS file and moved styles for the CSS editor to their own files. JsSucks/BetterDiscordApp#41
This commit is contained in:
Samuel Elliott
parent
31041f75dd
commit
ecfc2ca7d6
|
|
@ -94,18 +94,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bd-info {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bd-info span {
|
||||
color: #414245;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
try {
|
||||
await PluginManager.refreshPlugins();
|
||||
} catch (err) {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,55 +56,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bd-spinner-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bd-spinner-container .bd-spinner-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.bd-pluginsView .bd-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bd-pluginsView .bd-button h3 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-pluginsView .bd-button .material-design-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
fill: #FFF;
|
||||
}
|
||||
|
||||
.bd-material-button {
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.bd-pluginsView .bd-button {
|
||||
border-bottom: 2px solid #2b2d31;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bd-material-button > span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bd-material-button:hover {
|
||||
background: #2d2f34;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
@import './plugincard.scss';
|
||||
|
||||
.bd-pluginsView {
|
||||
.bd-button {
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
h3 {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
font-size: 1.17em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.bd-active {
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
border-bottom: 2px solid #3e82e5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings-button {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 22px;
|
||||
width: 70px;
|
||||
height: 48px;
|
||||
left: 0;
|
||||
background: #202225;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06);
|
||||
opacity: 1;
|
||||
|
||||
.bd-settings-button-btn {
|
||||
background-image: $logoSmallBw;
|
||||
background-size: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3000;
|
||||
cursor: pointer;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.5;
|
||||
transition: all 0.4s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
z-index: 90000;
|
||||
|
||||
.bd-settings-button-btn {
|
||||
background-image: $logoBigBw;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 20px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-settings {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 3000;
|
||||
width: 310px;
|
||||
transform: translateX(-100%) translateY(-100%);
|
||||
opacity: 0;
|
||||
transition: all .4s ease-in-out;
|
||||
|
||||
&.active {
|
||||
width: 900px;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bd-settings-x {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 250px;
|
||||
border: 2px solid #6e6e6e;
|
||||
border-radius: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
color: #72767d;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(218,5%,47%,.3);
|
||||
}
|
||||
}
|
||||
|
||||
.platform-darwin & {
|
||||
top: 0px;
|
||||
|
||||
.bd-sidebar-view .bd-sidebar-region,
|
||||
.bd-sidebar-view .bd-content-region {
|
||||
padding-top: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.bd-settings-button {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 22px;
|
||||
width: 70px;
|
||||
height: 48px;
|
||||
left: 0;
|
||||
background: #202225;
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06);
|
||||
opacity: 1;
|
||||
|
||||
.bd-settings-button-btn {
|
||||
background-image: $logoSmallBw;
|
||||
background-size: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3000;
|
||||
cursor: pointer;
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.5;
|
||||
transition: all 0.4s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
z-index: 90000;
|
||||
|
||||
.bd-settings-button-btn {
|
||||
background-image: $logoBigBw;
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
width: 130px;
|
||||
height: 80px;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 20px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@import './button.scss';
|
||||
@import './sidebarview.scss';
|
||||
@import './plugins.scss';
|
||||
@import './plugincard.scss';
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.bd-pluginsView {
|
||||
.bd-button {
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
border-bottom: 2px solid #2b2d31;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
display: block;
|
||||
font-size: 1.17em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-weight: bold;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.material-design-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.bd-active {
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
border-bottom: 2px solid #3e82e5;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-spinner-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
.bd-spinner-2 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
.bd-settings {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 3000;
|
||||
width: 310px;
|
||||
transform: translateX(-100%) translateY(-100%);
|
||||
opacity: 0;
|
||||
transition: all .4s ease-in-out;
|
||||
|
||||
&.active {
|
||||
width: 900px;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bd-settings-x {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 250px;
|
||||
border: 2px solid #6e6e6e;
|
||||
border-radius: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
color: #72767d;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(218,5%,47%,.3);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-info {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
color: #414245;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-darwin & {
|
||||
top: 0px;
|
||||
|
||||
.bd-sidebar-view .bd-sidebar-region,
|
||||
.bd-sidebar-view .bd-content-region {
|
||||
padding-top: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,244 +0,0 @@
|
|||
.bd-scroller-wrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.bd-scroller {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #1e2124;
|
||||
border-color: #36393e;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb,
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-clip: padding-box;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 7px;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #2f3136;
|
||||
border-color: #36393e;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-dark {
|
||||
.bd-scroller {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #36393e;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #2b2e31;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content-region,
|
||||
.bd-content-region .bd-content-column {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
background: $colbdblue;
|
||||
|
||||
&:not(.bd-disabled):hover {
|
||||
background: darken($colbdblue, 5%);
|
||||
}
|
||||
|
||||
&.bd-disabled {
|
||||
filter: grayscale(90%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bd-spinner-7 {
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-form-item h5 {
|
||||
color: #b9bbbe;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bd-form-divider {
|
||||
height: 1px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 40px;
|
||||
background: hsla(218,5%,47%,.3);
|
||||
}
|
||||
|
||||
.bd-form-warning {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
background: #d84040;
|
||||
border: 1px solid #B30B0B;
|
||||
opacity: .8;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.bd-form-warning .bd-text {
|
||||
display: flex;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-form-warning .bd-form-button {
|
||||
margin: 0;
|
||||
align-self: flex-end;
|
||||
background: #C42929;
|
||||
|
||||
&:hover {
|
||||
background: darken(#C42929, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-form-button {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bd-setting-switch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.bd-setting-switch .bd-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bd-setting-switch .bd-switch-wrapper {
|
||||
flex: 0 0 auto;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bd-switch-wrapper input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bd-switch-wrapper .bd-switch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #72767d;
|
||||
border-radius: 14px;
|
||||
transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
|
||||
}
|
||||
|
||||
.bd-setting-switch .bd-title h3 {
|
||||
font-weight: 500;
|
||||
color: #f6f6f7;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bd-setting-switch .bd-hint {
|
||||
flex: 1 1 auto;
|
||||
color: #72767d;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
line-height: 30px;
|
||||
border-bottom: 0px solid hsla(218,5%,47%,.1);
|
||||
}
|
||||
|
||||
.bd-switch-wrapper .bd-switch:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: #f6f6f7;
|
||||
border-radius: 10px;
|
||||
transition: all .15s ease;
|
||||
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
.bd-switch-wrapper .bd-switch.bd-checked {
|
||||
background: $colbdblue;
|
||||
}
|
||||
|
||||
.bd-switch-wrapper .bd-switch.bd-checked:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.bd-setting-switch + .bd-form-divider {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.bd-setting-switch.bd-disabled {
|
||||
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.bd-switch:before {
|
||||
background: #888888;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.bd-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
background: $colbdblue;
|
||||
|
||||
&:not(.bd-disabled):hover {
|
||||
background: darken($colbdblue, 5%);
|
||||
}
|
||||
|
||||
&.bd-disabled {
|
||||
filter: grayscale(90%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bd-spinner-7 {
|
||||
opacity: .3;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
.bd-form-item h5 {
|
||||
color: #b9bbbe;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bd-form-divider {
|
||||
height: 1px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 40px;
|
||||
background: hsla(218,5%,47%,.3);
|
||||
}
|
||||
|
||||
.bd-form-warning {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
background: #d84040;
|
||||
border: 1px solid #B30B0B;
|
||||
opacity: .8;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
.bd-text {
|
||||
display: flex;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-form-button {
|
||||
margin: 0;
|
||||
align-self: flex-end;
|
||||
background: #C42929;
|
||||
|
||||
&:hover {
|
||||
background: darken(#C42929, 2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-form-button {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import './switches.scss';
|
||||
@import './spinners/index.scss';
|
||||
@import './scrollable.scss';
|
||||
@import './buttons.scss';
|
||||
@import './forms.scss';
|
||||
@import './material-buttons.scss';
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.bd-material-button {
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #2d2f34;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.bd-scroller-wrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.bd-scroller {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #1e2124;
|
||||
border-color: #36393e;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb,
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-clip: padding-box;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 7px;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #2f3136;
|
||||
border-color: #36393e;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.bd-dark {
|
||||
.bd-scroller {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #36393e;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background-color: #2b2e31;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
.bd-spinner {
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim-before {
|
||||
0% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim-before {
|
||||
0% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim-after {
|
||||
0% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim-after {
|
||||
0% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.bd-spinner-1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
.bd-spinner-10 {
|
||||
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;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-10-anim {
|
||||
0% {
|
||||
transform: scale(0.8) rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(1.3) rotate(0.01deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1) rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8) rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-10-anim1 {
|
||||
0% {
|
||||
transform: rotate(-25deg) rotate(0.01deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(375deg) rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(335deg) rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.bd-spinner-2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
.bd-spinner-3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: #202225;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-3-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2)rotate(0.01deg);
|
||||
transform: scale(1.2)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-3-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(0.8)rotate(0.01deg);
|
||||
transform: scale(1.2)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-3-anim-after {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(0.4)rotate(0.01deg);
|
||||
transform: scale(0.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-3-anim-after {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(0.4)rotate(0.01deg);
|
||||
transform: scale(0.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
.bd-spinner-4 {
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
right: 5px;
|
||||
top: 15px;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-4-anim {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-4-anim {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
.bd-spinner-5 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-5-anim-before {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-5-anim-before {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
.bd-spinner-6 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-6-anim-before {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-6-anim-before {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-6-anim-after {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-6-anim-after {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
.bd-spinner-7 {
|
||||
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;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
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;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-box-shadow: 15px 0 0 0 #fff;
|
||||
box-shadow: 15px 0 0 0 #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim {
|
||||
0% {
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(30px,0)rotate(0.01deg);
|
||||
transform: translate(30px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim {
|
||||
0% {
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(30px,0)rotate(0.01deg);
|
||||
transform: translate(30px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale(1.4)rotate(0.01deg);
|
||||
transform: scale(1.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim-before {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale(1.4)rotate(0.01deg);
|
||||
transform: scale(1.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim-after {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(-45px,0)rotate(0.01deg);
|
||||
transform: translate(-45px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim-after {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(-45px,0)rotate(0.01deg);
|
||||
transform: translate(-45px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
.bd-spinner-8 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-8-anim-before {
|
||||
0% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-3px,0)rotate(0.01deg);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-8-anim-after {
|
||||
0% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(3px,0)rotate(0.01deg);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.bd-spinner-9 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-9-anim {
|
||||
0% {
|
||||
transform: scale(1) rotate(0.01deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale(1.3) rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(0.9) rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@import './0.scss';
|
||||
@import './1.scss';
|
||||
@import './2.scss';
|
||||
@import './3.scss';
|
||||
@import './4.scss';
|
||||
@import './5.scss';
|
||||
@import './6.scss';
|
||||
@import './7.scss';
|
||||
@import './8.scss';
|
||||
@import './9.scss';
|
||||
@import './10.scss';
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
.bd-setting-switch {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
.bd-title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bd-switch-wrapper {
|
||||
flex: 0 0 auto;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bd-switch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #72767d;
|
||||
border-radius: 14px;
|
||||
transition: background .15s ease-in-out, box-shadow .15s ease-in-out, border .15s ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: #f6f6f7;
|
||||
border-radius: 10px;
|
||||
transition: all .15s ease;
|
||||
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
&.bd-checked {
|
||||
background: $colbdblue;
|
||||
|
||||
&::before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-title h3 {
|
||||
font-weight: 500;
|
||||
color: #f6f6f7;
|
||||
flex: 1;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bd-hint {
|
||||
flex: 1 1 auto;
|
||||
color: #72767d;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
line-height: 30px;
|
||||
border-bottom: 0px solid hsla(218,5%,47%,.1);
|
||||
}
|
||||
|
||||
+ .bd-form-divider {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
&.bd-disabled {
|
||||
input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bd-switch::before {
|
||||
background: #888888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
@import './images.scss';
|
||||
@import './colours.scss';
|
||||
@import './variables/index.scss';
|
||||
@import './animations.scss';
|
||||
@import './spinners.scss';
|
||||
@import './layouts.scss';
|
||||
@import './bdsettings.scss';
|
||||
@import './sidebarview.scss';
|
||||
@import './generic.scss';
|
||||
|
||||
@import './discordoverrides.scss';
|
||||
@import './sidebarview/index.scss';
|
||||
@import './bdsettings/index.scss';
|
||||
@import './generic/index.scss';
|
||||
|
||||
@import './discordoverrides.scss';
|
||||
|
|
|
|||
|
|
@ -1,155 +0,0 @@
|
|||
.bd-sidebar-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bd-sidebar-region {
|
||||
background: #202225;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-pack: end;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1 0 30%;
|
||||
z-index: 5;
|
||||
max-width: 310px;
|
||||
min-width: 310px;
|
||||
|
||||
.bd-settingsWrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
min-height: 1px;
|
||||
box-sizing: border-box;
|
||||
padding: 80px 15px 15px 15px;
|
||||
|
||||
.bd-scroller.bd-sidebar {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding: 0;
|
||||
|
||||
.bd-header {
|
||||
padding: 6px 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.bd-item {
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: 6px;
|
||||
padding: 6px 10px;
|
||||
color: $coldimwhite;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $colbdblue;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content-region {
|
||||
flex-grow: 1;
|
||||
transform: translateX(-100%);
|
||||
background: #36393e;
|
||||
box-shadow: 0 0 4px #202225;
|
||||
|
||||
.bd-content-column {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-settingsWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.bd-scroller-wrap {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bd-settingsWrap-header {
|
||||
color: $colbdblue;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 100%;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content-column > div:not(.active) {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bd-content {
|
||||
animation: bd-fade-in .4s forwards;
|
||||
|
||||
.animating {
|
||||
animation: bd-fade-out .4s forwards;
|
||||
}
|
||||
|
||||
.bd-settingsWrap {
|
||||
padding: 20px 15px 15px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.active {
|
||||
.bd-content-region {
|
||||
animation: bd-slidein .6s forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
.bd-content-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
backface-visibility: hidden;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-settingsWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
.bd-scroller-wrap {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bd-settingsWrap-header {
|
||||
color: $colbdblue;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 100%;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
> div:not(.active) {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content {
|
||||
animation: bd-fade-in .4s forwards;
|
||||
|
||||
.animating {
|
||||
animation: bd-fade-out .4s forwards;
|
||||
}
|
||||
|
||||
.bd-settingsWrap {
|
||||
padding: 20px 15px 15px 15px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import './main.scss';
|
||||
@import './sidebar.scss';
|
||||
@import './content.scss';
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
.bd-sidebar-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
.bd-sidebar-region {
|
||||
background: #202225;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-pack: end;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1 0 30%;
|
||||
z-index: 5;
|
||||
max-width: 310px;
|
||||
min-width: 310px;
|
||||
|
||||
.bd-settingsWrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
min-height: 1px;
|
||||
box-sizing: border-box;
|
||||
padding: 80px 15px 15px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content-region {
|
||||
flex-grow: 1;
|
||||
transform: translateX(-100%);
|
||||
background: #36393e;
|
||||
box-shadow: 0 0 4px #202225;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.bd-content-region {
|
||||
animation: bd-slidein .6s forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
.bd-sidebar {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding: 0;
|
||||
|
||||
.bd-header {
|
||||
padding: 6px 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.bd-item {
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: 6px;
|
||||
padding: 6px 10px;
|
||||
color: $coldimwhite;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $colbdblue;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,942 +0,0 @@
|
|||
.bd-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
-webkit-animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
-webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
right: 5px;
|
||||
top: 15px;
|
||||
-webkit-animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim1 {
|
||||
0% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim1 {
|
||||
0% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(10px, 0);
|
||||
transform: translate(10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim2 {
|
||||
0% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim2 {
|
||||
0% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-10px, 0);
|
||||
transform: translate(-10px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-anim3 {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-anim3 {
|
||||
from {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*BD-SPINNER-1*/
|
||||
.bd-spinner-1 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*BD-SPINNER-2*/
|
||||
.bd-spinner-2 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*BD-SPINNER-3*/
|
||||
.bd-spinner-3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-3::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
-webkit-animation: bd-spinner-3-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-3-anim1 3s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-3::after {
|
||||
content: "";
|
||||
background: #202225;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
-webkit-animation: bd-spinner-3-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-3-anim2 3s cubic-bezier(.4, 0, 0, 1) -.1s infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-3-anim1 {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(1.2)rotate(0.01deg);
|
||||
transform: scale(1.2)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-3-anim1 {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(0.8)rotate(0.01deg);
|
||||
transform: scale(1.2)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-3-anim2 {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(0.4)rotate(0.01deg);
|
||||
transform: scale(0.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-3-anim2 {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: scale(0.4)rotate(0.01deg);
|
||||
transform: scale(0.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*BD-SPINNER-4*/
|
||||
.bd-spinner-4 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
-webkit-animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
|
||||
animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-4::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-4::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
right: 5px;
|
||||
top: 15px;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-4-anim1 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-4-anim1 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*BD-SPINNER-5*/
|
||||
.bd-spinner-5 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-5::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
left: 5px;
|
||||
top: 10px;
|
||||
-webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-5::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
left: 5px;
|
||||
bottom: 10px;
|
||||
-webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-5-anim1 2s cubic-bezier(0.4, 0, 0, 1) -1s infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-5-anim1 {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-5-anim1 {
|
||||
0% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: 0px;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/*BD-SPINNER-6*/
|
||||
.bd-spinner-6 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg)
|
||||
}
|
||||
|
||||
.bd-spinner-6::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
-webkit-animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-6-anim1 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-6::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
-webkit-animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
animation: bd-spinner-6-anim2 2s cubic-bezier(.4, 0, 0, 1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-6-anim1 {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-6-anim1 {
|
||||
0% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-6-anim2 {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-6-anim2 {
|
||||
0% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
25% {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
50% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
75% {
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
100% {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*BD-SPINNER-7*/
|
||||
.bd-spinner-7 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner-7-anim3 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
}
|
||||
|
||||
.bd-spinner-7::before {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 0px;
|
||||
top: 16px;
|
||||
-webkit-animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite;
|
||||
animation: bd-spinner-7-anim1 1s cubic-bezier(.2,0,0,.2) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-7::after {
|
||||
content: "";
|
||||
background: #fff;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 15px;
|
||||
top: 16px;
|
||||
-webkit-animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
animation: bd-spinner-7-anim2 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-box-shadow: 15px 0 0 0 #fff;
|
||||
box-shadow: 15px 0 0 0 #fff;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim1 {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale(1.4)rotate(0.01deg);
|
||||
transform: scale(1.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim1 {
|
||||
0% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
-webkit-transform: scale(1.4)rotate(0.01deg);
|
||||
transform: scale(1.4)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1)rotate(0.01deg);
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim2 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(-45px,0)rotate(0.01deg);
|
||||
transform: translate(-45px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim2 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(-45px,0)rotate(0.01deg);
|
||||
transform: translate(-45px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bd-spinner-7-anim3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(30px,0)rotate(0.01deg);
|
||||
transform: translate(30px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-7-anim3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0,0)rotate(0.01deg);
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(30px,0)rotate(0.01deg);
|
||||
transform: translate(30px,0)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*BD-SPINNER-8*/
|
||||
.bd-spinner-8 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-8::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-8-anim1 1.5s cubic-bezier(.4,0,0,1) infinite;
|
||||
}
|
||||
|
||||
.bd-spinner-8::after {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-8-anim2 1.5s cubic-bezier(.4,0,0,1) infinite;
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-8-anim1 {
|
||||
0% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(-3px,0)rotate(0.01deg);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-8-anim2 {
|
||||
0% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(3px,0)rotate(0.01deg);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0,0)rotate(0.01deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*BD-SPINNER-9*/
|
||||
.bd-spinner-9 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.bd-spinner-9::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgc3R5bGU9InN0cm9rZTpub25lIiBkPSJNMTQwMi4yLDYzMS43Yy05LjctMzUzLjQtMjg2LjItNDk2LTY0Mi42LTQ5Nkg2OC40djcxNC4xbDQ0MiwzOThWNDkwLjdoMjU3YzI3NC41LDAsMjc0LjUsMzQ0LjksMCwzNDQuOSAgICAgICAgSDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNiAgICAgICAgQzEzNTcuNyw5MTUuOCwxNDAyLjIsNzk0LjMsMTQwMi4yLDYzMS43eiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-9-anim1 1s cubic-bezier(.4,0,0,1) -.05s infinite;
|
||||
}
|
||||
|
||||
.bd-spinner-9::after {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjAwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwMCAyMDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyNjIuNSwxMzUuMkwxMjYyLjUsMTM1LjJsLTc2LjgsMGMyNi42LDEzLjMsNTEuNywyOC4xLDc1LDQ0LjNjNzAuNyw0OS4xLDEyNi4xLDExMS41LDE2NC42LDE4NS4zICAgICAgICBjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNiAgICAgICAgYy0zOC41LDczLjgtOTMuOCwxMzYuMi0xNjQuNiwxODUuM2MtMjIuNiwxNS43LTQ2LjksMzAuMS03Mi42LDQzLjFoNzIuNWMzNDYuMiwxLjksNjcxLTE3MS4yLDY3MS01NjcuOVY3MTYuNyAgICAgICAgQzE5MzMuNSwzMTIuMiwxNjA4LjcsMTM1LjIsMTI2Mi41LDEzNS4yeiIvPjwvZz48L3N2Zz4=) 50% 50%/70% no-repeat;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-9-anim1 1s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-9-anim1 {
|
||||
0% {
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale(1.3)rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(0.9)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*BD-SPINNER-10*/
|
||||
.bd-spinner-10 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
animation: bd-spinner-10-anim2 1s cubic-bezier(.4,0,0,1) infinite;
|
||||
}
|
||||
|
||||
.bd-spinner-10::before {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
.bd-spinner-10::after {
|
||||
content: "";
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-10-anim1 {
|
||||
0% {
|
||||
transform: rotate(-25deg)rotate(0.01deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(375deg)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(335deg)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bd-spinner-10-anim2 {
|
||||
0% {
|
||||
transform: scale(0.8)rotate(0.01deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(1.3)rotate(0.01deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1)rotate(0.01deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8)rotate(0.01deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,4 +2,4 @@ $colbdblue: #3e82e5;
|
|||
$colerr: #d84040;
|
||||
$colwarn: #faa61a;
|
||||
$colok: #43b581;
|
||||
$coldimwhite: #b9bbbe;
|
||||
$coldimwhite: #b9bbbe;
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
$logoSmallBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
$logoBigBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
|
||||
$logoBigBw: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTk0MCA2NDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5NDAgNjQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTU2LjEsMjczLjlIMjl2MTQyLjdsODQuNiw3Ni4yVjM1NC4yaDQ1LjJjMjguNywwLDQyLjksMTMuOCw0Mi45LDM2djEwNmMwLDIyLjItMTMuNCwzNy4xLTQyLjksMzcuMUgyOC42djgwLjdoMTI3YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzI4OC4xLDMwOC43LDIyNC4yLDI3My45LDE1Ni4xLDI3My45TDE1Ni4xLDI3My45eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik04MjEuOSw1MDIuM1YzODUuMmMwLTQyLjEsNzUuOC01MS43LDk4LjctOS42bDcwLTI4LjNjLTI3LjYtNjAuNS03Ny43LTc4LjEtMTE5LjQtNzguMWMtNjguMSwwLTEzNS41LDM5LjQtMTM1LjUsMTE1Ljl2MTE3LjFjMCw3Ny4zLDY3LjMsMTE1LjksMTMzLjksMTE1LjljNDIuOSwwLDk0LjEtMjEsMTIyLjUtNzYuMmwtNzUtMzQuNEM4OTguOCw1NTQuOCw4MjEuOSw1NDMuMyw4MjEuOSw1MDIuM0w4MjEuOSw1MDIuM3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTkwLjQsNDAxLjNjLTI2LjQtNS43LTQ0LTE1LjMtNDUuMi0zMS44YzEuNS0zOS40LDYyLjQtNDAuOSw5OC0zLjFsNTYuMy00My4yYy0zNS4yLTQyLjktNzUtNTQuMy0xMTUuOS01NC4zYy02Mi40LDAtMTIyLjgsMzUuMi0xMjIuOCwxMDEuOGMwLDY0LjcsNDkuNyw5OS41LDEwNC41LDEwNy45YzI3LjksMy44LDU4LjksMTQuOSw1OC4yLDM0LjFjLTIuMywzNi40LTc3LjMsMzQuNC0xMTEuNC02LjlsLTU0LjMsNTAuOWMzMS44LDQwLjksNzUsNjEuNiwxMTUuNiw2MS42YzYyLjQsMCwxMzEuNi0zNiwxMzQuMy0xMDEuOEM3MTEuMyw0MzMuNSw2NTAuOSw0MTIuNCw1OTAuNCw0MDEuM0w1OTAuNCw0MDEuM3oiLz48cmVjdCB4PSIzMzQiIHk9IjI3My45IiBmaWxsPSIjRkZGRkZGIiB3aWR0aD0iODUuNyIgaGVpZ2h0PSIzMzkuOCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzc5LjMsMjczLjloLTEyN3YxNDIuN2w4NC42LDc2LjJWMzU0LjJoNDUuMmMyOC43LDAsNDIuOSwxMy44LDQyLjksMzZ2MTA2YzAsMjIuMi0xMy40LDM3LjEtNDIuOSwzNy4xaC0xMzAuMXY4MC43aDEyNy40YzY4LjEsMC40LDEzMi0zMy43LDEzMi0xMTEuN3YtMTE0QzE5MTEuNCwzMDguNywxODQ3LjUsMjczLjksMTc3OS4zLDI3My45TDE3NzkuMywyNzMuOXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTE1NiwyNjkuM2MtNzAuNCwwLTE0MC40LDM4LjMtMTQwLjQsMTE2LjdWNTAyYzAsNzcuNyw3MC40LDExNi43LDE0MS4yLDExNi43YzcwLjQsMCwxNDAuNC0zOSwxNDAuNC0xMTYuN1YzODZDMTI5Ny4yLDMwNy45LDEyMjYuNCwyNjkuMywxMTU2LDI2OS4zeiBNMTIxMS4xLDUwMmMwLDI0LjUtMjcuNiwzNy4xLTU0LjcsMzcuMWMtMjcuNiwwLTU1LjEtMTEuOS01NS4xLTM3LjFWMzg2YzAtMjQuOSwyNi44LTM4LjMsNTMuNi0zOC4zYzI3LjksMCw1Ni4zLDExLjksNTYuMywzOC4zVjUwMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTUzOC4zLDQ5Ny40YzQwLjktMTMsNjYuNi00OC42LDY2LjYtMTExLjRjLTEuOS03OS42LTU2LjMtMTExLjctMTI2LjMtMTExLjdoLTEzNS44djMzOS44aDg2LjlWNTA2LjJoMTUuM2w3OC44LDEwNy45aDEwNy4xTDE1MzguMyw0OTcuNHogTTE0ODAuMSw0MzEuOWgtNTAuNXYtNzcuN2g1MC41QzE1MzQuMSwzNTQuMiwxNTM0LjEsNDMxLjksMTQ4MC4xLDQzMS45eiIvPjwvZz48Zz48cGF0aCBmaWxsPSIjM0U4MkU1IiBkPSJNMTAzLjMsNDMuM0gyOC42djc3LjFsNDcuNyw0M1Y4MS43aDI3LjhjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIODUuOHYzNS42aDE4LjNjMjkuNiwwLDI5LjYsMzcuMiwwLDM3LjJIMjguNlYyMzBoNzQuNmMzOC41LDAsNjguMy0xNS40LDY5LjQtNTMuNmMwLTE3LjYtNC44LTMwLjctMTMuMy0zOS44YzguNS05LjEsMTMuMy0yMi4yLDEzLjMtMzkuOEMxNzEuNiw1OC43LDE0MS44LDQzLjMsMTAzLjMsNDMuM3oiLz48cG9seWdvbiBmaWxsPSIjM0U4MkU1IiBwb2ludHM9IjM1OC43LDQzLjMgMzU4LjcsODEuNyA0MDYuOCw4MS43IDQwNi44LDIzMCA0NTQuNSwyMzAgNDU0LjUsODEuNyA1MjkuOCw4MS43IDUyOS44LDIzMCA1NzcuNiwyMzAgNTc3LjYsODEuNyA2MjUuNyw4MS43IDYyNS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSIxOTcuNiw0My4zIDE5Ny42LDIzMCAzNDEuNywyMzAgMzQxLjcsMTkxLjcgMjQ1LjQsMTkxLjcgMjQ1LjQsMTYwLjUgMjk2LjUsMTYwLjUgMjk2LjUsMTEyLjggMjQ1LjQsMTEyLjggMjQ1LjQsODEuNyAzNDEuNyw4MS43IDM0MS43LDQzLjMgIi8+PHBvbHlnb24gZmlsbD0iIzNFODJFNSIgcG9pbnRzPSI2NDIuNCw0My4zIDY0Mi40LDIzMCA3ODYuNCwyMzAgNzg2LjQsMTkxLjcgNjkwLjEsMTkxLjcgNjkwLjEsMTYwLjUgNzQxLjMsMTYwLjUgNzQxLjMsMTEyLjggNjkwLjEsMTEyLjggNjkwLjEsODEuNyA3ODYuNCw4MS43IDc4Ni40LDQzLjMgIi8+PHBhdGggZmlsbD0iIzNFODJFNSIgZD0iTTkxOC42LDE2NmMyMi41LTcuMSwzNi41LTI2LjYsMzYuNS02MS4xYy0xLTQzLjYtMzAuOC02MS43LTY5LjItNjEuN2gtNzQuNVYyMzBIODU5di01OS4yaDguNGw0My4yLDU5LjJoNTguN0w5MTguNiwxNjZ6IE04ODYuNywxMzAuMkg4NTlWODEuN2gyNy43QzkxNi4zLDgxLjcsOTE2LjMsMTMwLjIsODg2LjcsMTMwLjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './colours.scss';
|
||||
@import './images.scss';
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
<div class="valign">Loading Please Wait...</div>
|
||||
</div>
|
||||
<div id="editor" class="editor">
|
||||
<codemirror
|
||||
ref="mycm"
|
||||
<codemirror
|
||||
ref="mycm"
|
||||
:options="cmOptions"
|
||||
@input="cmOnChange"
|
||||
/>
|
||||
|
|
@ -191,312 +191,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../node_modules/codemirror/lib/codemirror.css';
|
||||
@import '../../node_modules/codemirror/theme/material.css';
|
||||
@import '../../node_modules/codemirror/addon/scroll/simplescrollbars.css';
|
||||
@import '../../node_modules/codemirror/addon/dialog/dialog.css';
|
||||
@import '../../node_modules/codemirror/addon/hint/show-hint.css';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
background: #2c383e;
|
||||
min-width: 700px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.valign {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
display: flex;
|
||||
height: 25px;
|
||||
padding: 4px 5px;
|
||||
background: #292b2f;
|
||||
border-bottom: 1px solid hsla(218,5%,47%,.3);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.titlebar .icon {
|
||||
width: 31px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.titlebar .icon .inner {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
background-size: 22px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.titlebar .title {
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.titlebar .controls {
|
||||
margin: 0 0 0 2px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.titlebar .controls button {
|
||||
-webkit-app-region: no-drag;
|
||||
border-radius: 3px;
|
||||
width: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
/*background: #263238;*/
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: default;
|
||||
border: 0;
|
||||
height: 25px;
|
||||
z-index: 900062;
|
||||
padding: 0;
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
|
||||
.titlebar .controls button:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.titlebar .controls button.active {
|
||||
background: #3a71c1;
|
||||
}
|
||||
|
||||
.titlebar .draggable {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 63px;
|
||||
position: absolute;
|
||||
height: 33px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
background: rgba(51, 48, 48, 0.41);
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 2em;
|
||||
z-index: 90000;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor .vue-codemirror {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor .vue-codemirror,
|
||||
.editor .vue-codemirror .CodeMirror {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tools {
|
||||
height: 36px;
|
||||
background: #292b2f;
|
||||
border-top: 1px solid hsla(218,5%,47%,.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tools .flex-row {
|
||||
flex-grow: 1;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
.tools button {
|
||||
border-radius: 3px;
|
||||
width: 100px;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.tools button:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate {
|
||||
padding: 3px 10px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate input[type="checkbox"] {
|
||||
margin: 0 6px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tools #chkboxLiveUpdate span {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*CodeMirror styling*/
|
||||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler {
|
||||
background: #38444a;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal div,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal,
|
||||
.CodeMirror-overlayscroll-horizontal div {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-vertical,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #292b2f;
|
||||
}
|
||||
|
||||
.CodeMirror-gutter {
|
||||
min-width: 34px;
|
||||
border-right: 1px solid hsla(218,5%,47%,.3);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
/*background: #1e262a;*/
|
||||
background: #292b2f;
|
||||
box-shadow: 2px 3px 5px rgba(4, 4, 4, 0.22);
|
||||
border: 1px solid #262f33;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0,0,0,.4);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar-thumb,
|
||||
.CodeMirror-hints::-webkit-scrollbar-track {
|
||||
background-clip: padding-box;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.CodeMirror-hints::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber,
|
||||
.CodeMirror-line {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-linenumber {
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
color: #bac9d2;
|
||||
}
|
||||
|
||||
li.CodeMirror-hint-active {
|
||||
color: #bac9d2;
|
||||
/*background: #3b4950;*/
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog-top {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border: none;
|
||||
background: #1e262a;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
const styles = require('./styles/index.scss');
|
||||
|
||||
import Vue from 'vue';
|
||||
import Editor from './Editor.vue';
|
||||
import VueCodemirror from 'vue-codemirror'
|
||||
|
|
@ -10,4 +12,10 @@ new Vue({
|
|||
el: '#root',
|
||||
template: '<Editor/>',
|
||||
components: { Editor }
|
||||
});
|
||||
});
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = 'bd-main';
|
||||
style.type = 'text/css';
|
||||
style.appendChild(document.createTextNode(styles));
|
||||
document.head.appendChild(style);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler {
|
||||
background: #38444a;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal div,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-horizontal,
|
||||
.CodeMirror-overlayscroll-horizontal div {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-overlayscroll-vertical,
|
||||
.CodeMirror-overlayscroll-vertical div {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgb(41, 43, 47);
|
||||
}
|
||||
|
||||
.cm-s-material.CodeMirror {
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-gutters {
|
||||
background: #292b2f;
|
||||
}
|
||||
|
||||
.CodeMirror-gutter {
|
||||
min-width: 34px;
|
||||
border-right: 1px solid hsla(218,5%,47%,.3);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
/*background: #1e262a;*/
|
||||
background: #292b2f;
|
||||
box-shadow: 2px 3px 5px rgba(4, 4, 4, 0.22);
|
||||
border: 1px solid #262f33;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0,0,0,.4);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb,
|
||||
&::-webkit-scrollbar-track {
|
||||
background-clip: padding-box;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber,
|
||||
.CodeMirror-line {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-s-material .CodeMirror-linenumber {
|
||||
color: #f6f6f7;
|
||||
}
|
||||
|
||||
.CodeMirror-hint {
|
||||
color: #bac9d2;
|
||||
}
|
||||
|
||||
li.CodeMirror-hint-active {
|
||||
color: #bac9d2;
|
||||
/*background: #3b4950;*/
|
||||
background: #36393f;
|
||||
}
|
||||
|
||||
.CodeMirror-dialog-top {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border: none;
|
||||
background: #1e262a;
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.vue-codemirror {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&, & .CodeMirror {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
$bdicon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@import '../../../node_modules/codemirror/lib/codemirror.css';
|
||||
@import '../../../node_modules/codemirror/theme/material.css';
|
||||
@import '../../../node_modules/codemirror/addon/scroll/simplescrollbars.css';
|
||||
@import '../../../node_modules/codemirror/addon/dialog/dialog.css';
|
||||
@import '../../../node_modules/codemirror/addon/hint/show-hint.css';
|
||||
|
||||
@import './images.scss';
|
||||
@import './main.scss';
|
||||
@import './titlebar.scss';
|
||||
@import './spinner.scss';
|
||||
@import './editor.scss';
|
||||
@import './tools.scss';
|
||||
@import './codemirror.scss';
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
background: #2c383e;
|
||||
min-width: 700px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.valign {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
#spinner {
|
||||
background: rgba(51, 48, 48, 0.41);
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 2em;
|
||||
z-index: 90000;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
.titlebar {
|
||||
display: flex;
|
||||
height: 25px;
|
||||
padding: 4px 5px;
|
||||
background: #292b2f;
|
||||
border-bottom: 1px solid hsla(218,5%,47%,.3);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
|
||||
.icon {
|
||||
width: 31px;
|
||||
height: 25px;
|
||||
|
||||
.inner {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-image: $bdicon;
|
||||
background-size: 22px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
line-height: 25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0 0 0 2px;
|
||||
font-size: 0;
|
||||
|
||||
button {
|
||||
-webkit-app-region: no-drag;
|
||||
border-radius: 3px;
|
||||
width: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
/*background: #263238;*/
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: default;
|
||||
border: 0;
|
||||
height: 25px;
|
||||
z-index: 900062;
|
||||
padding: 0;
|
||||
margin: 0 0 0 4px;
|
||||
|
||||
&:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #3a71c1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggable {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 63px;
|
||||
position: absolute;
|
||||
height: 33px;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.tools {
|
||||
height: 36px;
|
||||
background: #292b2f;
|
||||
border-top: 1px solid hsla(218,5%,47%,.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
|
||||
.flex-row {
|
||||
flex-grow: 1;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 3px;
|
||||
width: 100px;
|
||||
padding: 3px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #36393f;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
transition: background-color .2s ease;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin-right: 4px;
|
||||
|
||||
&:hover {
|
||||
background: #44474e;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
#chkboxLiveUpdate {
|
||||
padding: 3px 10px;
|
||||
line-height: 22px;
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin: 0 6px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #bac9d2;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue