dwssite/static/style.css

* {
    margin: 0;
    padding: 0
}

/* Basic reset */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #1d2021;
    overflow: hidden;
    /* No default scrollbars */
    font-family: "JetBrains Mono", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}

h1 {
    font-size: 48px;
    color: #ebdbb2;
}

h2 {
    font-size: 36px;
    color: #ebdbb2;
}

h3 {
    font-size: 28px;
    color: #ebdbb2;
}

/*******************************************
   * Main Container (holds racks + cables)
   *******************************************/
#patch-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* SVG overlay for cables, on top of racks */
#cable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* put cables on top */
    pointer-events: none;
    /* let clicks pass through by default */
}

/* Each cable path can be clicked on => remove */
.cable-path {
    pointer-events: auto;
    /* re-enable clicks for cable paths specifically */
    cursor: pointer;
    transition: stroke 0.2s;
}

.cable-path:hover {
    stroke: #cc241d !important;
}

/*******************************************
   * Data center (the racks) 
   *******************************************/
#datacenter {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    /* If you want horizontal scrolling if there are many racks, use:
       overflow-x: auto; 
    */
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1;
    /* behind cable overlay */
}

.rack {
    width: 16em;
    /* each rack’s width */
    /* fill all available vertical space */
    background: #282828;
    border: 2px solid #3c3836;
    margin: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* stack servers top to bottom */
}

.rack-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    color: #ebdbb2;
    margin: 8px 0;
    letter-spacing: 1px;
}

.server {
    background: #32302f;
    border: 1px solid #3c3836;
    margin: 6px;
    /* spacing within the rack */
}

.server-under-construction {
    /* Diagonal stripes:
       repeating-linear-gradient(angle, color1 start, color1 end, color2 start, color2 end) */
    background: repeating-linear-gradient(
      45deg,
      #282828 0,
      #282828 12px,
      #32302f 12px,
      #32302f 24px
    );
    color:#000;
    border: 2px dashed #282828; /* Give it a dashed border for effect */
  }

.server-row {
    padding: 5px 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-row {
    font-size: 14px;
    color: #ebdbb2;
}

.port-row {
    gap: 8px;
    display: flex;
    justify-content: right;
}

/* If you want a spacer between servers, you can use a simple div with .spacer. */
.spacer {
    height: 20px;
}

/*******************************************
   * Port + LED styling
   *******************************************/
.port {
    position: relative;
    width: 1rem;
    height: 1rem;
    background: #32302f;
    border: 2px solid #504945;
    border-radius: 50%;
    cursor: pointer;
}

.port:hover {
    background: #7c6f64;
    border-color: #ebdbb2;
}

a:link {
    color: #b16286;
  }
  
  /* visited link */
  a:visited {
    color: #8f3f71;
  }
  
  /* mouse over link */
  a:hover {
    color: #d3869b;
  }
  
  /* selected link */
  a:active {
    color: #b16286;
  }

.led {
    position: absolute;
    top: -5px;
    right: -5px;
    width: .4rem;
    height: .4rem;
    background: #1d2021;
    /* off state */
    border: 2px solid #504945;
    border-radius: 50%;
    box-shadow: 0 0 2px #000;
}

.temp-row {
    position: relative;
    flex: 1;
  }
  .temp-label {
    color: #eee;
    font-size: 11px;
    margin-right: 8px;
  }
  .temp-bar {
    flex: 1;
    height: 10px;
    background: linear-gradient(to right, #f80, #f00);
    box-shadow: 0 0 6px rgba(255,80,0,0.5);
    animation: flickerHeat 1.5s infinite ease-in-out alternate;
  }
  @keyframes flickerHeat {
    0%   { opacity: 1;   transform: scaleX(1);   }
    100% { opacity: 0.7; transform: scaleX(1.05); }
  }

  /***************************************************
   * POWER USAGE LIGHTS (Random Blink)
   ***************************************************/
  .power-lights-row {
    gap: 4px;
  }
  .power-light {
    width: 10px; height: 10px;
    background: #222;
    border: 2px solid #555;
    border-radius: 2px;
    box-shadow: 0 0 2px #000;
  }
  .power-light.lit {
    background: #0f0; /* or something bright to indicate usage */
  }

/************************************************
   * FAN SPACER: Animated fans
   ************************************************/
.fans {
    background: #7c6f64;
    margin: 6px;
    /* spacing within the rack */
}

.fan-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 5px 0;
}

.fan {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-image: url('fan.svg');
    filter: invert(29%) sepia(3%) saturate(1342%) hue-rotate(338deg) brightness(93%) contrast(90%);
    animation: spin 1s linear infinite;
    transform-origin: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s linear;
}

.fan:hover {
    animation: 5s;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/************************************************
   * NAS SPACER: Random blinking drive lights
   ************************************************/
.nas {
    background: #504945;
    border: 1px solid #7c6f64;
    margin: 6px;
    /* spacing within the rack */
}

.drive-lights-row {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 5px 0;
    flex-wrap: wrap;
    /* if many lights, wrap to next line */
}

.drive-light {
    width: 12px;
    height: 12px;
    background: #1d2021;
    /* off by default */
    border: 2px solid #504945;
    border-radius: 2px;
    box-shadow: 0 0 2px #000;
}

.drive-light.lit {
    background: #b8bb26;
    /* or any color you like */
}