201 lines
3.4 KiB
CSS
201 lines
3.4 KiB
CSS
:root {
|
|
--bg-1: #0b1e2d;
|
|
--bg-2: #113a4a;
|
|
--accent: #ffb703;
|
|
--accent-2: #fb8500;
|
|
--ok: #2ec4b6;
|
|
--fail: #ff4d6d;
|
|
--idle: #8ecae6;
|
|
--panel: rgba(9, 24, 33, 0.75);
|
|
--card: rgba(17, 39, 52, 0.82);
|
|
--border: rgba(255, 255, 255, 0.14);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Space Grotesk", sans-serif;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
background: radial-gradient(circle at 20% 20%, var(--bg-2), transparent 42%),
|
|
radial-gradient(circle at 80% 30%, #215f6b, transparent 35%),
|
|
linear-gradient(140deg, var(--bg-1), #07131d 70%);
|
|
color: #f6f7f9;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.aurora {
|
|
position: fixed;
|
|
width: 42vmax;
|
|
height: 42vmax;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
opacity: 0.22;
|
|
z-index: 0;
|
|
animation: drift 18s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.aurora-a {
|
|
background: #ffb703;
|
|
top: -8vmax;
|
|
left: -8vmax;
|
|
}
|
|
|
|
.aurora-b {
|
|
background: #2ec4b6;
|
|
right: -10vmax;
|
|
bottom: -10vmax;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
@keyframes drift {
|
|
from {
|
|
transform: translateY(0) translateX(0) scale(1);
|
|
}
|
|
to {
|
|
transform: translateY(20px) translateX(30px) scale(1.1);
|
|
}
|
|
}
|
|
|
|
.hero-panel,
|
|
.log-panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero-panel h1 {
|
|
font-weight: 700;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.eyebrow {
|
|
text-transform: uppercase;
|
|
font-size: 0.78rem;
|
|
letter-spacing: 1.6px;
|
|
color: #ffdd99;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.btn-accent {
|
|
background: linear-gradient(130deg, var(--accent), var(--accent-2));
|
|
color: #092235;
|
|
border: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-accent:hover,
|
|
.btn-accent:focus {
|
|
color: #07131d;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.job-card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
height: 100%;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
animation: reveal 0.45s ease both;
|
|
}
|
|
|
|
@keyframes reveal {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.mono {
|
|
font-family: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
.summary-box {
|
|
background: rgba(3, 12, 18, 0.5);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
padding: 0.55rem 0.7rem;
|
|
min-height: 42px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.status-chip {
|
|
border-radius: 999px;
|
|
padding: 0.3rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.status-running {
|
|
background: rgba(255, 183, 3, 0.22);
|
|
color: #ffe2a3;
|
|
}
|
|
|
|
.status-ok {
|
|
background: rgba(46, 196, 182, 0.2);
|
|
color: #a9f3eb;
|
|
}
|
|
|
|
.status-fail {
|
|
background: rgba(255, 77, 109, 0.2);
|
|
color: #ffc8d2;
|
|
}
|
|
|
|
.status-idle {
|
|
background: rgba(142, 202, 230, 0.2);
|
|
color: #cbefff;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.55rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.level-info {
|
|
background: rgba(72, 149, 239, 0.2);
|
|
}
|
|
|
|
.level-warning {
|
|
background: rgba(255, 183, 3, 0.2);
|
|
}
|
|
|
|
.level-error {
|
|
background: rgba(255, 77, 109, 0.2);
|
|
}
|
|
|
|
.table {
|
|
--bs-table-bg: transparent;
|
|
--bs-table-color: #f6f7f9;
|
|
}
|
|
|
|
.table thead {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.table tbody tr {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-panel,
|
|
.log-panel {
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.job-card {
|
|
border-radius: 14px;
|
|
}
|
|
}
|