src/web/gui/v2/static/splash.css
:root {
--main-bg: #080a0a;
--font-color: #b7c2c2;
--primary-green: #00ab44;
--column-gap: 8px;
--logo-color: #f1fff7;
--button-text-green: #00cd51;
--border-color: #536775;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
background: var(--main-bg);
color: var(--font-color);
font-weight: 200;
font-size: 14px;
line-height: 20px;
}
iframe.hidden {
display: none;
}
#agent-splash-screen a:link,
#agent-splash-screen a:visited,
#agent-splash-screen a:active {
font-size: 12px;
color: var(--primary-green);
font-weight: normal;
}
#agent-splash-screen .hero {
position: relative;
display: flex;
width: 500px;
margin: auto;
align-items: center;
justify-content: center;
flex-direction: column;
gap: calc(var(--column-gap) * 4);
text-align: center;
margin: 120px auto 32px;
}
#agent-splash-screen .logo-container {
position: relative;
}
#agent-splash-screen .logo-blur {
position: absolute;
width: 315px;
height: 315px;
left: -100%;
top: -100%;
filter: blur(30px);
pointer-events: none;
}
#agent-splash-screen .logo {
filter: drop-shadow(-6px -2px 20px rgba(255, 255, 255, 0.6)) blur(0.7px);
}
#agent-splash-screen.loading .logo {
animation: glow 800ms linear infinite alternate;
}
#agent-splash-screen .headings {
display: flex;
flex-direction: column;
gap: calc(var(--column-gap) * 2);
height: 104px;
}
#agent-splash-screen .title {
font-size: 22px;
line-height: 26px;
font-weight: 200;
margin: 0;
}
#agent-splash-screen .subtitle {
font-size: 14px;
line-height: 20px;
margin: 0;
}
#agent-splash-screen .flex-center {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
#agent-splash-screen .flex-column {
flex-direction: column;
}
#agent-splash-screen a.button {
appearance: none;
border: none;
border-radius: 2px;
cursor: pointer;
text-decoration: none;
text-align: center;
}
#agent-splash-screen a.button svg {
width: 22px;
height: 16px;
}
#agent-splash-screen a.button.ghost {
background: transparent;
color: var(--button-text-green);
padding: 4px 6px;
font-size: 14px;
font-weight: 200;
}
#agent-splash-screen a.button.ghost:hover {
background: #00441b;
}
#agent-splash-screen a.button.large {
background: transparent;
border: 1px solid var(--primary-green);
font-size: 18px;
padding: 12px;
color: var(--button-text-green);
width: 100%;
font-weight: 200;
}
#agent-splash-screen a.button.large:hover {
background: #00441b;
}
#agent-splash-screen .loading-message .subtitle {
display:none;
}
#agent-splash-screen.loading .loading-message .subtitle {
display:block;
height: 56px;
}
#agent-splash-screen .loading-message .flex-center {
display: none;
}
#agent-splash-screen.error .loading-message .flex-center {
display: flex;
margin: 8px auto;
}
#agent-splash-screen .loading-message table {
display: none;
border-collapse: collapse;
border: 1px solid var(--border-color);
color: var(--font-color);
}
#agent-splash-screen.table .loading-message table {
display: table;
margin: 8px auto;
}
#agent-splash-screen .dashboard-buttons {
width: 320px;
margin: auto;
gap: 24px;
}
#agent-splash-screen .terms {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
margin: auto;
}
.green {
color: var(--primary-green);
}
@keyframes glow {
from {
filter: drop-shadow(-6px -2px 20px rgba(255, 255, 255, 0.9)) blur(0.9px);
}
to {
filter: drop-shadow(-6px -2px 20px rgba(255, 255, 255, 0.3)) blur(0.4px);
}
}