frontend/src/global.scss

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@import '~@circlon/angular-tree-component/css/angular-tree-component.css';
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham-dark.css";
@import "~@fortawesome/fontawesome-free/css/all.min.css";
@import "~@fortawesome/fontawesome-free/css/brands.min.css";

:root {
  --noded-background-note: #3A86FF;
  --noded-color-note: white;
  --noded-background-note-hover: #66a1ff;

  --noded-background-db: #8338EC;
  --noded-color-db: white;
  --noded-background-db-hover: #a873f2;

  --noded-background-node: #FB5607;
  --noded-color-node: white;
  --noded-background-node-hover: #fc864f;

  --noded-background-code: #FF006E;
  --noded-color-code: white;
  --noded-background-code-hover: #FF5CA3;

  --noded-background-files: #0E7B81;
  --noded-color-files: white;
  --noded-background-files-hover: #14AFB8;

  --noded-background-markdown: #5F4D30;
  --noded-color-markdown: white;
  --noded-color-markdown-hover: #7A633E;

  --noded-background-form: #F2C57C;
  --noded-color-form: white;
  --noded-background-form-hover: #F8DEB5;
}

.noded-note {
  color: var(--noded-background-note);
}

.noded-db {
  color: var(--noded-background-db);
}

.noded-node {
  color: var(--noded-background-node);
}

.noded-code {
  color: var(--noded-background-code);
}

.noded-files {
  color: var(--noded-background-files);
}

.noded-markdown {
  color: var(--noded-background-markdown);
}

.noded-form {
  color: var(--noded-background-form);
}

div.picker-wrapper {
  border: 2px solid lightgrey !important;
  border-radius: 7px !important;
}

.noded-loading-mask {
  //--background: #222;
  //--spinner-color: #fff;
  --backdrop-opacity: 0.7;

  ion-backdrop {
    background: #333;
  }

  //color: #fff;
}

hr {
  background: darkgray;
}

.compat-toast-container {
  color: white !important;
}

.compat-toast-container::part(header) {
  font-size: 1.2em;
  font-weight: bold;
}

.markdown-display {
  h1, h2, h3, h4, h5 {
    margin-top: 35px;
  }

  blockquote {
    padding: 1px 20px;
    color: #444;
    background: #eee;
    border-left: 2px solid darkgrey;
    margin-left: 10px;
  }

  table {
    width: 100%;
    margin: 30px 0;
  }

  table, th, td {
    border: 1px solid darkgrey;
    border-collapse: collapse;
  }

  th, td {
    padding: 5px;
  }

  code {
    color: #ea4894;
  }

  pre {
    background: #fff9ff;
    padding: 10px;
  }
}

.mr-10 {
  margin-right: 10px;
}

ionic-selectable-modal {
  border: 1px solid lightgrey;
}

.modal-big {
  .modal-wrapper {
    min-height: calc(100vh - 30px);
    min-width: calc(100vw - 30px);
  }
}

.modal-med {
  .modal-wrapper {
    min-height: calc(100vh - 100px);
    min-width: calc(100vw - 200px);
  }
}

.clear-btn {
  background: rgba(0,0,0,0);
}

/* ============== DARK MODE FIXES ============== */
body.dark {
  .node-content-wrapper-focused {
    background: rgba(25, 25, 70, 0.5);
  }

  .node-content-wrapper:hover {
    background: rgba(35,35,80,0.5);
  }

  .toggle-children {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAABb2lDQ1BpY2MAACiRdZE7SwNBFIW/REWJkSBaiFikiGKhIAoiVhoLmyAhRvDV7K67iZCNy+4GEVvBxkKwEG18Ff4DbQVbBUFQBBELf4GvRmS9YwIR0Vlm78eZOZeZMxBOFQzbq+0Du+i7mfFkfHpmNl7/RCMRmgkzrBmeM5pOp/h3vN8QUvW6V/X6f9+fo3HB9AwINQgPGo7rC48Ip5Z9R/GGcKuR1xaE94V7XDmg8IXS9TI/Ks6V+VWxm82MQVj1jOd+sP6DjbxrC3cLJ+xCyaicR90kahanJqW2y+zAI8M4SeLolFikgE+v1KJk9rev79s3wZJ4DPk7rOCKI0devD2ilqSrKdUS3ZSvwIrK/XeenjXQX+4eTULdQxC8dEL9FnxuBsHHQRB8HkLNPZwVq/4lyWnoTfTNqpbYg9ganJxXNX0bTteh7c7RXO1bqpEZtix4PoamGWi5gshcOavKOke3kF2VJ7qEnV3okv2x+S/c92f6MFQaBwAAAAlwSFlzAAAPYQAAD2EBqD+naQAAAJxJREFUOE+l09sNgCAMBVBQh2H/aVhGkRIuKaTSIib8+DjclupijCmvx21enqDBSCGEY9UFxDHPEDN6sY8AdGhNrIIcgtklqjd5C0RUgnh7ZinpvYZam0ogFpWO1ZJqiaTD46WX57mPtzXRbBqovPNPIqDldDFzq1AbjXForVBpLpXwVaMGqQBgQNIQThOMyXiirnmrPy1BWwA2fAF/+T0bUHyzUAAAAABJRU5ErkJggg==');
  }

  ion-item, ion-title, ion-button {
    color: white !important;
  }

  ion-input {
    --color: white;
  }

  .compat-toast-container::part(container) {
    background-color: #313131;
    border-radius: 4px;
  }

  h1, h2, h3, h4, h5, h6, p, .clear-btn {
    color: white;
  }
}