Bitburner 2.0

by David Kyle

HTML

<div class="primary-bg">
  <div class="rounded border shadow">
    <div class="liner">
      <div class="s-node-table-wrapper">
        <h1 class="border-bottom">
          Node Manager
        </h1>
        <div class="s-node-table">
          <div class="s-node-row">
            <h4 class="node-label">
              <span>n00dles</span>
              <span class="state green">Root</span>
              <span class="state red">Backdoor</span>
            </h4>
            <div class="s-node-detail">
              <div class="liner items-full-width">
                <div class="route">
                  <span class="label">Route</span>
                  <ul>
                    <li><span title="ip-Address">home</span>
                      <ul>
                        <li title="12.144.21.54">foodnstuff</li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="summary">
                  <h3>
                    Noodle Bar
                  </h3>
                  <div class="basic-info">
                    <div class="liner icon-stat ram" title="Total Memory">
                      <img class="ram"...

CSS

body {
  background-color: rgb(30, 30, 30);
  font-family: Verdana, Arial, sans-serif;
}

h5 {
  margin-top: 0.1rem;
  margin-bottom: 0.4rem;
}

.ram, .cpu {
  height: 26px;
  margin-right: .1rem;
}

.icon-stat {
  display: inline-flex;
  vertical-align: middle;
  line-height: 26px;
}

.s-node-table-wrapper h1 {
  font-size: large;
  display: block;
  width: 100%;
  margin-top: 0.1rem;
}

.s-node-table-wrapper h4 {
  margin: 0.1rem;
  font-size: small;
}

.s-node-row {
  border: none;
  display: block;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

h4.node-label {
  display: grid;
  grid-template-columns: 10% 20% 20%;
  grid-column-gap: 0.2rem;
}

.state:before {
  content: "\2022";
  margin-right: 0.1rem;
}

.green:before {
  color: rgb(100, 200, 100);
}

.red:before {
  color: rgb(200, 100, 100);
}

.s-node-row h4 {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  background-color: rgba(180, 180, 180, 0.1);
}

.s-node-row h4:hover {
  background-color: rgba(120, 120, 120, 0.4);
  transition: all 0.3s ease-in-out;
}

.s-node-row .s-node-detail {
  display: none;
  transition: all 0.3s ease-in-out;
}

.s-node-row.expanded {
  border: solid 1px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease-in-out;
}

.route {
  display: block;
  width: 100%;
}

.route>span {
  display: inline-flex;
}

.label {
  font-weight: bold;
}

.route ul {
  display: inline-flex;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.route ul li span:after {
  content: ' >';
}

.s-node-row.expanded .s-node-detail {
  display: block !important;
  transition: all 0.3s ease-in-out;
}

.s-node-table {
  display: block;
}

.border-bottom {
  border-bottom: solid 1px rgba(100, 100, 80, 0.6);
}

.rounded {
  border-radius: 0.2rem;
  padding: 0.2rem;
}

.s-node-table {
  display: flex;
  width: 100%;
  height: 100%;
}

.border {
  border: solid 1px rgba(100, 100, 80, 0.6);
}

.shadow {
  box-shadow: rgb(0 0 0 / 40%) 0px 0px 12px 0px;
}

.shadow-light {
  box-shadow: inset...

JavaScript

document.addEventListener("click", function(e) {
  const target = e.target.closest(".s-node-row");

  if (target) {
    if (target.className.indexOf('expanded') > 0) {
      target.classList.remove('expanded');
    } else {
      target.classList.add('expanded');
    }
  }
});