NINAstyle.scss

/*-- scss:defaults --*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap');

$primary: #425563;
/*$primary: #000000;*/
$teal: #008C95;
$secondary: $teal;
$green: #7A9A01;
$orange: #E57200;
$yellow: #FFB25B;
$purple: #93328E;
$cyan: #0099e6;
$hr-border-color: $primary;
$headings-color: $primary;
$link-color: $secondary;
$font-family-sans-serif: "Open Sans", Helvetica, Arial;
$font-weight-normal: 300;
$font-weight-light: 200;
$headings-font-weight: 300;
$headings-font-family: $font-family-sans-serif;
$body-color: #000000;;

/*-- table styling --*/

table thead tr {
  background-color: rgba($primary, .8);
  color: white;
}

table tbody tr:nth-child(even) {
  background-color: rgba($primary, .1);
}

table tbody tr:nth-child(odd) {
  background-color: white;
}

/*-- codeblock styling --*/
pre, code {
  border: 1px solid #ccc; // Light grey border
  background-color: #f8f8f8; // Light grey background
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); // Optional: adds a subtle shadow
  border-radius: 0; // Rounded corners
  padding: 10px; // Some padding inside the box
  overflow: auto; // Adds a scrollbar if the content is wider than the box

  // If you want to style code within pre differently
  code {
      background-color: transparent; // Ensures nested code elements don't have a different background
  }
}


/*-- scss:rules --*/

/* Example of a note class for adding textboxes. 
:::{.note}
**Note**: This is a note.
:::
*/
.note {
    background-color: rgba($primary, .2); 
    border: 1px solid $primary; // Use the primary color as the border
    padding: 10px 10px 2px 10px;
    border-radius: 5px;
    color: $body-color; // Use the body color for the text
    font-family: $font-family-sans-serif;
    font-size: 0.8em;
    margin: 20px 0 40px 0;
}

/* Example of a flowchart class in HTML
<div class="flowchart">
  <div class="flowchart-box" id="start">Start</div>
  <div class="flowchart-box" id="process1">Process 1</div>
  <div class="flowchart-box" id="decision">Decision</div>
  <div class="flowchart-box" id="process2">Process 2</div>
  <div class="flowchart-box" id="end">End</div>
</div>
*/

.flowchart {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flowchart-box {
    width: 100px;
    height: 50px;
    border: 1px solid $primary;
    text-align: center;
    padding: 10px;
    margin: 25px;
    position: relative;
}

.flowchart-box::after {
    content: '';
    position: absolute;
    bottom: -42px;
    left: 50%;
    width: 2px;
    height: 42px;
    background-color: $primary;
}

.flowchart-box::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 51%;
    border-width: 10px 5px 0 5px;
    border-style: solid;
    border-color: $primary transparent transparent transparent;
    transform: translateX(-50%);
}

#start, #end {
    background-color: $teal;
}

#end::after, #end::before {
    display: none;
}