import styling components from bootstrap

src/css/bootstrap.scss

@@ -0,0 +1,3 @@
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";

src/css/helpers.scss

@@ -0,0 +1 @@
+@import "../../node_modules/bootstrap/scss/helpers/visually-hidden";

src/css/settings.scss

@@ -1,3 +1,7 @@
+@import "bootstrap";
+@import "spinner";
+@import "helpers";
+
 .ncdownloader-personal-settings,
 .ncdownloader-admin-settings {
     position: relative;

src/css/spinner.scss

@@ -0,0 +1,2 @@
+@import "../../node_modules/bootstrap/scss/spinners";
+

src/css/style.scss

@@ -1,3 +1,7 @@
+@import 'bootstrap';
+@import 'spinner';
+@import 'helpers';
+
 #ncdownloader-settings-collapsible-container {
     padding-left: 4%;
 }
@@ -192,99 +196,3 @@
         width: 135px;
     }
 }
-
-/* from bootstrap */
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
-    position   : absolute !important;
-    width      : 1px !important;
-    height     : 1px !important;
-    padding    : 0 !important;
-    margin     : -1px !important;
-    overflow   : hidden !important;
-    clip       : rect(0, 0, 0, 0) !important;
-    white-space: nowrap !important;
-    border     : 0 !important;
-}
-
-@-webkit-keyframes spinner-border {
-    to {
-        transform   : rotate(360deg)
-            /* rtl  :ignore */
-        ;
-    }
-}
-
-@keyframes spinner-border {
-    to {
-        transform   : rotate(360deg)
-            /* rtl  :ignore */
-        ;
-    }
-}
-
-.spinner-border {
-    display           : inline-block;
-    width             : 2rem;
-    height            : 2rem;
-    vertical-align    : -0.125em;
-    border            : 0.25em solid currentColor;
-    border-right-color: transparent;
-    border-radius     : 50%;
-    -webkit-animation : 0.75s linear infinite spinner-border;
-    animation         : 0.75s linear infinite spinner-border;
-}
-
-.spinner-border-sm {
-    width       : 1rem;
-    height      : 1rem;
-    border-width: 0.2em;
-}
-
-@-webkit-keyframes spinner-grow {
-    0% {
-        transform: scale(0);
-    }
-
-    50% {
-        opacity  : 1;
-        transform: none;
-    }
-}
-
-@keyframes spinner-grow {
-    0% {
-        transform: scale(0);
-    }
-
-    50% {
-        opacity  : 1;
-        transform: none;
-    }
-}
-
-.spinner-grow {
-    display          : inline-block;
-    width            : 2rem;
-    height           : 2rem;
-    vertical-align   : -0.125em;
-    background-color : currentColor;
-    border-radius    : 50%;
-    opacity          : 0;
-    -webkit-animation: 0.75s linear infinite spinner-grow;
-    animation        : 0.75s linear infinite spinner-grow;
-}
-
-.spinner-grow-sm {
-    width : 1rem;
-    height: 1rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-
-    .spinner-border,
-    .spinner-grow {
-        -webkit-animation-duration: 1.5s;
-        animation-duration        : 1.5s;
-    }
-}