moved stylesheets to own folder

src/stylesheets/theme-styles.scss

+:root {
+  --drgstn-primary: #347eee;
+  --drgstn-secondary: #fd6818;
+  --drgstn-success: #48C774;
+  --drgstn-warning: #ffdd00;
+  --drgstn-danger: #c527ff;
+  --drgstn-background: #ffffff;
+  --drgstn-panel: #f8f8f8;
+  --drgstn-info: #61c43d;
+  --drgstn-text-primary: #151515;
+  --drgstn-text-secondary: #eeeeee;
+  --drgstn-border: rgba(0, 0, 0, 0.2);
+  --drgstn-tooltip: rgba(74, 74, 74, 0.9);
+  --drgstn-panel-secondary: #ffffff
+}
+
+#appWindow {
+  background-color: var(--drgstn-background);
+
+
+  .card-header-title, .card-content, .title {
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .card {
+    background-color: var(--drgstn-panel) !important;
+  }
+
+  .card-footer, .card-footer-item:not(:last-child), .tabs ul, .tabs a .tabs a:hover {
+    border-color: var(--drgstn-border) !important;
+  }
+
+  .tabs a {
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .tabs.is-toggle a {
+    border-color: var(--drgstn-border) !important;
+  }
+
+  .tabs.is-toggle a:hover {
+    background-color: var(--drgstn-panel) !important;
+  }
+
+  .tabs li.is-active a, .tabs.is-toggle li.is-active a, .tabs a:hover {
+    border-color: var(--drgstn-primary) !important;
+    color: var(--drgstn-primary) !important;
+  }
+
+  .content h4, .content h6 {
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .has-text-normal, .modal-card-title {
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .modal-card, .modal-card-body {
+    background-color: var(--drgstn-panel) !important;
+  }
+
+  .modal-card-head, .modal-card-foot {
+    border-color: var(--drgstn-border) !important;
+    background-color: var(--drgstn-border) !important;
+  }
+
+  .modal-card-body {
+    .label {
+      color: var(--drgstn-text-primary) !important;
+    }
+
+    .input, .select select, .textarea, .box {
+      background-color: var(--drgstn-panel) !important;
+      border-color: var(--drgstn-border) !important;
+      color: var(--drgstn-text-primary) !important;
+    }
+  }
+
+
+  .fa-check {
+    color: var(--drgstn-success) !important;
+  }
+
+  app-task-list a, a.card-header-icon {
+    color: var(--drgstn-secondary) !important;
+  }
+
+  a:hover {
+    color: var(--drgstn-primary) !important;
+  }
+
+  .button.is-primary {
+    background-color: var(--drgstn-primary) !important;
+    border-color: transparent !important;
+    color: var(--drgstn-text-secondary) !important;
+  }
+
+  .button.is-primary.is-outlined {
+    background-color: transparent !important;
+    border-color: var(--drgstn-border) !important;
+    color: var(--drgstn-primary) !important;
+  }
+
+
+  .button.is-primary.is-focused, .button.is-primary:focus {
+    background-color: var(--drgstn-primary) !important;
+    border-color: transparent !important;
+    color: var(--drgstn-text-secondary) !important;
+  }
+
+  .button.is-primary.button.is-hovered, .button.is-primary.button:hover {
+    color: var(--drgstn-text-secondary) !important;
+    background-color: var(--drgstn-primary) !important;
+  }
+
+  .button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active) {
+    box-shadow: none !important;
+  }
+
+  .button.is-danger.is-outlined {
+    border-color: var(--drgstn-danger) !important;
+    color: var(--drgstn-danger) !important;
+  }
+
+  .button.is-success {
+    background-color: var(--drgstn-success) !important;
+    color: var(--drgstn-text-secondary) !important;
+  }
+
+
+  .text-primary {
+    color: var(--drgstn-primary) !important;
+  }
+
+  footer a .text-danger:focus, footer a .text-danger:hover {
+    color: var(--drgstn-danger) !important;
+  }
+
+  footer .text-danger, a .text-danger {
+    color: var(--drgstn-danger) !important;
+  }
+
+  .is-primary {
+    background-color: var(--drgstn-primary) !important;
+  }
+
+
+  .ng-select .ng-select-container .ng-value-container .ng-input > input {
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .fa-search.investigational, .fa-pause {
+    color: var(--drgstn-warning) !important;
+  }
+
+
+  .fa-exclamation-triangle, .fa-times, .help, .delete:after, .delete:before, .modal-close:after, .modal-close:before {
+    color: var(--drgstn-danger) !important;
+  }
+
+  .fa-check {
+    color: var(--drgstn-success) !important;
+  }
+
+  .table {
+    background-color: var(--drgstn-panel) !important;
+    color: var(--drgstn-text-primary) !important;
+  }
+
+  .table thead td, .table thead th {
+    color: var(--drgstn-text-primary) !important;
+  }
+
+
+  .button.is-hovered, .button:hover, .button {
+    background-color: var(--drgstn-panel) !important;
+    color: var(--drgstn-text-primary) !important;
+    border-color: var(--drgstn-border) !important;
+  }
+
+  a {
+    color: var(--drgstn-secondary);
+  }
+
+  a:hover {
+    color: var(--drgstn-text-primary)
+  }
+
+
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--scrollbarBG);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--thumbBG);
+    border-radius: 6px;
+    border: 3px solid var(--scrollbarBG);
+  }
+
+  ::-moz-scrollbar-button:decrement,
+  ::-moz-scrollbar-button:increment,
+  ::-webkit-scrollbar-button:decrement,
+  ::-webkit-scrollbar-button:increment {
+    width: 0px;
+  }
+}
+
+// scrolllbar styles
+network-expander {
+  --thumbBG: var(--drgstn-primary);
+  --scrollbarBG: var(--drgstn-background);
+}
+
+network-expander {
+  scrollbar-width: thin;
+  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+}
+
+
+
+
+

src/theme-styles.scss

-:root {
-  --drgstn-primary: #347eee;
-  --drgstn-secondary: #fd6818;
-  --drgstn-success: #48C774;
-  --drgstn-warning: #ffdd00;
-  --drgstn-danger: #c527ff;
-  --drgstn-background: #ffffff;
-  --drgstn-panel: #f8f8f8;
-  --drgstn-info: #61c43d;
-  --drgstn-text-primary: #151515;
-  --drgstn-text-secondary: #eeeeee;
-  --drgstn-border: rgba(0, 0, 0, 0.2);
-  --drgstn-tooltip: rgba(74,74,74,0.9);
-  --drgstn-panel-secondary: #ffffff
-}
-
-#appWindow {
-  background-color: var(--drgstn-background);
-}
-
-.card-header-title, .card-content, .title {
-  color: var(--drgstn-text-primary) !important;
-}
-
-.card {
-  background-color: var(--drgstn-panel) !important;
-}
-
-.card-footer, .card-footer-item:not(:last-child), .tabs ul, .tabs a .tabs a:hover {
-  border-color: var(--drgstn-border) !important;
-}
-
-.tabs a {
-  color: var(--drgstn-text-primary) !important;
-}
-
-.tabs.is-toggle a {
-  border-color: var(--drgstn-border) !important;
-}
-
-.tabs.is-toggle a:hover {
-  background-color: var(--drgstn-panel) !important;
-}
-
-.tabs li.is-active a, .tabs.is-toggle li.is-active a, .tabs a:hover {
-  border-color: var(--drgstn-primary) !important;
-  color: var(--drgstn-primary) !important;
-}
-
-.content h4, .content h6 {
-  color: var(--drgstn-text-primary) !important;
-}
-.has-text-normal, .modal-card-title {
-  color: var(--drgstn-text-primary) !important;
-}
-
-.modal-card, .modal-card-body {
-  background-color: var(--drgstn-panel) !important;
-}
-
-.modal-card-head, .modal-card-foot {
-  border-color: var(--drgstn-border) !important;
-  background-color: var(--drgstn-border) !important;
-}
-
-.modal-card-body {
-  .label {
-    color: var(--drgstn-text-primary) !important;
-  }
-
-  .input, .select select, .textarea, .box {
-    background-color: var(--drgstn-panel) !important;
-    border-color: var(--drgstn-border) !important;
-    color: var(--drgstn-text-primary) !important;
-  }
-}
-
-
-.fa-check {
-  color: var(--drgstn-success) !important;
-}
-
-app-task-list a, a.card-header-icon {
-  color: var(--drgstn-secondary) !important;
-}
-
-a:hover {
-  color: var(--drgstn-primary) !important;
-}
-
-.button.is-primary {
-  background-color: var(--drgstn-primary) !important;
-  border-color: transparent !important;
-  color: var(--drgstn-text-secondary) !important;
-}
-
-.button.is-primary.is-outlined {
-  background-color: transparent !important;
-  border-color: var(--drgstn-border) !important;
-  color: var(--drgstn-primary) !important;
-}
-
-
-.button.is-primary.is-focused, .button.is-primary:focus {
-  background-color: var(--drgstn-primary) !important;
-  border-color: transparent !important;
-  color: var(--drgstn-text-secondary) !important;
-}
-
-.button.is-primary.button.is-hovered, .button.is-primary.button:hover {
-  color: var(--drgstn-text-secondary) !important;
-  background-color: var(--drgstn-primary) !important;
-}
-
-.button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active) {
-  box-shadow: none !important;
-}
-
-.button.is-danger.is-outlined {
-  border-color: var(--drgstn-danger) !important;
-  color: var(--drgstn-danger) !important;
-}
-
-.button.is-success {
-  background-color: var(--drgstn-success) !important;
-  color: var(--drgstn-text-secondary) !important;
-}
-
-
-.text-primary {
-  color: var(--drgstn-primary) !important;
-}
-footer a .text-danger:focus, footer a .text-danger:hover{
-  color: var(--drgstn-danger) !important;
-}
-
-footer .text-danger, a .text-danger {
-  color: var(--drgstn-danger) !important;
-}
-
-.is-primary {
-  background-color: var(--drgstn-primary) !important;
-}
-
-
-.ng-select .ng-select-container .ng-value-container .ng-input > input {
-  color: var(--drgstn-text-primary) !important;
-}
-
-.fa-search.investigational, .fa-pause {
-  color: var(--drgstn-warning) !important;
-}
-
-
-.fa-exclamation-triangle, .fa-times, .help, .delete:after, .delete:before, .modal-close:after, .modal-close:before {
-  color: var(--drgstn-danger) !important;
-}
-
-.fa-check {
-  color: var(--drgstn-success) !important;
-}
-
-.table {
-  background-color: var(--drgstn-panel) !important;
-  color: var(--drgstn-text-primary) !important;
-}
-
-.table thead td, .table thead th {
-  color: var(--drgstn-text-primary) !important;
-}
-
-
-.button.is-hovered, .button:hover, .button {
-  background-color: var(--drgstn-panel) !important;
-  color: var(--drgstn-text-primary) !important;
-  border-color: var(--drgstn-border) !important;
-}
-
-a {
-  color: var(--drgstn-secondary);
-}
-
-a:hover {
-  color: var(--drgstn-text-primary)
-}
-
-
-.p-tooltip-text, .p-tooltip-arrow {
-  background: var(--drgstn-tooltip) !important;
-  border-radius: 2px !important;
-  padding: .5rem 1rem .5rem 1rem !important;
-  color: var(--drgstn-text-secondary) !important;
-  font-size: .75rem !important;
-}
-
-.p-datatable .p-sortable-column .p-sortable-column-icon{
-  color: inherit !important;
-}
-
-.p-datatable .p-datatable-tfoot > tr > td, .p-datatable .p-datatable-thead > tr > th {
-  background-color: var(--drgstn-panel) !important;
-  border-color: var(--drgstn-border) !important;
-  color: var(--drgstn-text-primary) !important;
-}
-
-.p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column:not(.p-highlight):hover, .p-datatable .p-sortable-column.p-highlight:hover {
-  background-color: var(--drgstn-panel) !important;
-  border-color: var(--drgstn-border) !important;
-  color: var(--drgstn-primary) !important;
-}
-
-
-.p-checkbox .p-checkbox-box {
-  border-color: var(--drgstn-text-primary) !important;
-  color: var(--drgstn-text-primary) !important;
-  background-color: var(--drgstn-panel) !important;
-  border-radius: 1px !important;
-  border-style: solid !important;
-  width: 18px !important;
-  height: 18px !important;
-  position: relative !important;
-}
-
-.p-datatable .p-datatable-tbody > tr > td, .button.is-light {
-  border-color: var(--drgstn-border) !important;
-  background-color: var(--drgstn-panel) !important;
-  color: var(--drgstn-text-primary) !important;
-}
-
-// scrolllbar styles
-network-expander {
-  --thumbBG: var(--drgstn-primary);
-  --scrollbarBG: var(--drgstn-background);
-}
-network-expander {
-  scrollbar-width: thin;
-  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
-}
-::-webkit-scrollbar {
-  width: 5px;
-}
-::-webkit-scrollbar-track {
-  background: var(--scrollbarBG);
-}
-::-webkit-scrollbar-thumb {
-  background: var(--thumbBG);
-  border-radius: 6px;
-  border: 3px solid var(--scrollbarBG);
-}
-::-moz-scrollbar-button:decrement,
-::-moz-scrollbar-button:increment,
-::-webkit-scrollbar-button:decrement,
-::-webkit-scrollbar-button:increment {
-  width: 0px;
-}
-
-
-
-