dwssite/static/style.css

323 lines
6.2 KiB
CSS
Raw Normal View History

2025-01-26 16:58:18 -05:00
* {
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 racks 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 */
}