131 lines
2.3 KiB
CSS
131 lines
2.3 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap");
|
|
|
|
:root {
|
|
--color-neon: #00ff41;
|
|
--color-bg: #050505;
|
|
}
|
|
|
|
body {
|
|
font-family: "JetBrains Mono", monospace;
|
|
background-color: var(--color-bg);
|
|
color: var(--color-neon);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--color-neon);
|
|
color: black;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 255, 65, 0.2);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 255, 65, 0.5);
|
|
}
|
|
|
|
.matrix-bg {
|
|
background-image:
|
|
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
|
|
linear-gradient(
|
|
90deg,
|
|
rgba(255, 0, 0, 0.06),
|
|
rgba(0, 255, 0, 0.02),
|
|
rgba(0, 0, 255, 0.06)
|
|
);
|
|
background-size:
|
|
100% 2px,
|
|
3px 100%;
|
|
}
|
|
|
|
/* Big Toggle Switch */
|
|
.big-toggle {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 40px;
|
|
}
|
|
|
|
.big-toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.big-toggle .slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
inset: 0;
|
|
background-color: #1a1a1a;
|
|
border: 2px solid rgba(0, 255, 65, 0.3);
|
|
border-radius: 40px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.big-toggle .slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 28px;
|
|
width: 28px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: rgba(0, 255, 65, 0.4);
|
|
border-radius: 50%;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.big-toggle input:checked + .slider {
|
|
background-color: rgba(0, 255, 65, 0.2);
|
|
border-color: #00ff41;
|
|
box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
|
|
}
|
|
|
|
.big-toggle input:checked + .slider:before {
|
|
transform: translateX(40px);
|
|
background-color: #00ff41;
|
|
box-shadow: 0 0 10px #00ff41;
|
|
}
|
|
|
|
/* Server Card */
|
|
.server-card {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.server-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 255, 65, 0.15);
|
|
}
|
|
|
|
.server-card.active {
|
|
border-color: #00ff41 !important;
|
|
box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
|
|
}
|
|
|
|
.blink-1 {
|
|
animation: blink 1s infinite;
|
|
}
|
|
.blink-2 {
|
|
animation: blink 1s infinite 0.2s;
|
|
}
|
|
.blink-3 {
|
|
animation: blink 1s infinite 0.4s;
|
|
}
|
|
@keyframes blink {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|