feat: Lightsail + svg animation
This commit is contained in:
Zakaria
@@ -4875,6 +4875,181 @@ button.console-service-card {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.ec2-connect-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.ec2-readiness-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ec2-readiness-card {
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 7px;
|
||||
background: color-mix(in srgb, var(--surface) 82%, var(--bg));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.ec2-readiness-card > span,
|
||||
.ec2-readiness-card small {
|
||||
color: var(--text-3);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ec2-readiness-card strong {
|
||||
color: var(--status-success);
|
||||
font: 600 13px "Space Mono", monospace;
|
||||
}
|
||||
|
||||
.ec2-readiness-card strong.error,
|
||||
.ec2-check-result.error strong {
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.ec2-connect-error,
|
||||
.ec2-check-result {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.ec2-connect-error {
|
||||
color: var(--status-error);
|
||||
border: 1px solid color-mix(in srgb, var(--status-error) 35%, transparent);
|
||||
background: color-mix(in srgb, var(--status-error) 8%, transparent);
|
||||
}
|
||||
|
||||
.ec2-connection-notice {
|
||||
padding: 9px 11px;
|
||||
border-left: 2px solid var(--text-3);
|
||||
background: color-mix(in srgb, var(--surface) 82%, var(--bg));
|
||||
color: var(--text-2);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.ec2-connect-details {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.ec2-command-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.ec2-command-row code {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.ec2-ssh-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.ec2-ssh-check strong,
|
||||
.ec2-launch-timeline h4 {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ec2-ssh-check p {
|
||||
margin: 3px 0 0;
|
||||
color: var(--text-3);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ec2-check-result {
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.ec2-check-result.success strong {
|
||||
color: var(--status-success);
|
||||
font-family: "Space Mono", monospace;
|
||||
}
|
||||
|
||||
.ec2-check-result span {
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
.ec2-launch-timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.ec2-launch-event {
|
||||
display: grid;
|
||||
grid-template-columns: 10px minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
.ec2-launch-event div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.ec2-launch-event strong {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ec2-launch-event small,
|
||||
.ec2-launch-event time {
|
||||
color: var(--text-3);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ec2-event-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-top: 3px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-3);
|
||||
}
|
||||
|
||||
.ec2-event-dot.ok,
|
||||
.ec2-event-dot.ready,
|
||||
.ec2-event-dot.completed,
|
||||
.ec2-event-dot.success {
|
||||
background: var(--status-success);
|
||||
}
|
||||
|
||||
.ec2-event-dot.failed,
|
||||
.ec2-event-dot.error {
|
||||
background: var(--status-error);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.ec2-readiness-grid,
|
||||
.ec2-connect-details {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ec2-ssh-check {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Copy object modal ──────────────────────────────────────────────────── */
|
||||
.copy-modal-overlay {
|
||||
position: fixed;
|
||||
@@ -5709,3 +5884,64 @@ button.console-service-card {
|
||||
.redis-value { flex: 1; min-height: 110px; max-height: 310px; overflow: auto; margin: 0; padding: 12px; color: var(--text); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||
.redis-set-form { border-top: 1px solid var(--border); background: var(--raised); }
|
||||
.redis-set-form strong { display: flex; align-items: center; gap: 6px; color: var(--text); font-size: 12px; }
|
||||
|
||||
.lightsail-launch { max-width: 980px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
|
||||
.lightsail-launch-header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
|
||||
.lightsail-launch h2, .lightsail-launch h3 { margin: 0; }
|
||||
.lightsail-launch h2 { font-size: 25px; }
|
||||
.lightsail-launch h3 { font-size: 17px; margin-bottom: 13px; }
|
||||
.lightsail-section { margin-top: 30px; }
|
||||
.lightsail-platforms, .lightsail-blueprints, .lightsail-plans { display: flex; flex-wrap: wrap; gap: 12px; }
|
||||
.lightsail-platform, .lightsail-blueprint, .lightsail-plans button { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); text-align: left; }
|
||||
.lightsail-platform { display: flex; align-items: center; gap: 11px; min-width: 250px; padding: 16px; }
|
||||
.lightsail-platform.selected, .lightsail-blueprint.selected, .lightsail-plans button.selected { border: 2px solid #ec7211; box-shadow: 0 0 0 1px color-mix(in srgb, #ec7211 18%, transparent); }
|
||||
.lightsail-platform svg:last-child { margin-left: auto; color: #ec7211; }
|
||||
.lightsail-platform span, .lightsail-blueprint span, .lightsail-plans button { display: flex; flex-direction: column; gap: 3px; }
|
||||
.lightsail-launch small { color: var(--text-muted); }
|
||||
.lightsail-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
|
||||
.lightsail-tabs button { border: 1px solid #ec7211; border-radius: 6px; padding: 8px 14px; background: transparent; color: #b7550a; }
|
||||
.lightsail-tabs button.active { background: #ec7211; color: white; }
|
||||
.lightsail-blueprint { width: 210px; min-height: 84px; padding: 13px; display: flex; align-items: center; gap: 13px; }
|
||||
.lightsail-blueprint img { width: 42px; height: 42px; object-fit: contain; }
|
||||
.lightsail-wordpress { display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #21759b; border-radius: 50%; color: #21759b; font-family: Georgia, serif; font-size: 29px; }
|
||||
.lightsail-plans button { width: 205px; padding: 13px; }
|
||||
.lightsail-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
|
||||
.lightsail-config label { display: grid; gap: 6px; font-weight: 600; }
|
||||
.server-launch-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #ec7211 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #ec7211 8%, var(--surface)); }
|
||||
.server-launch-progress svg { width: 70px; height: 56px; flex: 0 0 auto; }
|
||||
.server-launch-progress div { display: flex; flex-direction: column; gap: 3px; }
|
||||
.server-launch-progress small { color: var(--text-muted); }
|
||||
.database-launch-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #1769c2 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #1769c2 8%, var(--surface)); }
|
||||
.database-launch-progress svg { width: 56px; height: 56px; flex: 0 0 auto; }
|
||||
.database-launch-progress div { display: flex; flex-direction: column; gap: 3px; }
|
||||
.database-launch-progress small { color: var(--text-muted); }
|
||||
.database-led { animation: database-led-blink 1.4s ease-in-out infinite; }
|
||||
.database-led-b { animation-delay: .22s; }
|
||||
.database-led-c { animation-delay: .44s; }
|
||||
.database-led-d { animation-delay: .66s; }
|
||||
@keyframes database-led-blink { 0%, 25%, 100% { opacity: .28; } 45%, 72% { opacity: 1; } }
|
||||
.load-balancing-progress { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 16px; border: 1px solid color-mix(in srgb, #ffc52e 45%, var(--border)); border-radius: 9px; background: color-mix(in srgb, #ffc52e 8%, var(--surface)); }
|
||||
.load-balancing-progress svg { width: 72px; height: 64px; flex: 0 0 auto; }
|
||||
.load-balancing-progress div { display: flex; flex-direction: column; gap: 3px; }
|
||||
.load-balancing-progress small { color: var(--text-muted); }
|
||||
.lb-device { fill: #30283d; }.lb-panel { fill: #2b2440; stroke: #17132f; stroke-width: 5; }.lb-wire { fill: none; stroke: #17132f; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }.lb-yellow { fill: #ffc12d; }.lb-green { fill: #31aa98; }.lb-port { fill: none; stroke: #ffc52e; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }.lb-ports { animation: lb-port-morph 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.lb-hub { animation: lb-hub-pulse 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }.lb-blink-1 { animation: lb-blink-one 4.5s steps(1, end) infinite; }.lb-blink-2 { animation: lb-blink-two 4.5s steps(1, end) infinite; }.lb-blink-3 { animation: lb-blink-three 4.5s steps(1, end) infinite; }
|
||||
@keyframes lb-blink-one { 0%, 18%, 42%, 68%, 100% { opacity: 1; } 19%, 41%, 69%, 84% { opacity: .22; } } @keyframes lb-blink-two { 0%, 28%, 58%, 88%, 100% { opacity: .28; } 29%, 57%, 89%, 99% { opacity: 1; } } @keyframes lb-blink-three { 0%, 12%, 48%, 76%, 100% { opacity: 1; } 13%, 47%, 77%, 92% { opacity: .2; } } @keyframes lb-port-morph { 0%, 18%, 82%, 100% { transform: scaleX(.62); } 42%, 62% { transform: scaleX(1.18); } } @keyframes lb-hub-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
|
||||
@media (max-width: 640px) { .lightsail-launch { padding: 18px; } .lightsail-config { grid-template-columns: 1fr; } .lightsail-platform, .lightsail-blueprint, .lightsail-plans button { width: 100%; } }
|
||||
|
||||
.lightsail-instance-panel { overflow: visible; }
|
||||
.lightsail-instance-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 18px 8px; }
|
||||
.lightsail-instance-header h2 { margin: 3px 0; font-size: 22px; }
|
||||
.lightsail-instance-controls { display: flex; align-items: center; gap: 10px; }
|
||||
.lightsail-instance-controls summary { display: flex; align-items: center; gap: 4px; }
|
||||
.lightsail-actions-menu { min-width: 154px; right: 0; left: auto; }
|
||||
.lightsail-instance-tabs { margin: 0 18px; overflow-x: auto; }
|
||||
.lightsail-overview, .lightsail-tab-content { padding: 18px; }
|
||||
.lightsail-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
|
||||
.lightsail-detail { display: grid; gap: 5px; padding: 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised, var(--surface)); min-width: 0; }
|
||||
.lightsail-detail span { color: var(--text-muted); font-size: 12px; }
|
||||
.lightsail-detail code { overflow-wrap: anywhere; }
|
||||
.lightsail-tab-content h3 { display: flex; align-items: center; gap: 7px; margin: 20px 0 5px; font-size: 16px; }
|
||||
.lightsail-tab-content h3:first-child { margin-top: 0; }
|
||||
.lightsail-port-form { align-items: end; margin: 16px 0; }
|
||||
.lightsail-delete-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 18px 18px; padding: 10px; border: 1px solid color-mix(in srgb, var(--status-error, #dc2626) 45%, var(--border)); border-radius: 7px; }
|
||||
@media (max-width: 640px) { .lightsail-instance-header { padding: 14px; flex-direction: column; } .lightsail-instance-controls { width: 100%; justify-content: space-between; } .lightsail-instance-tabs { margin: 0 14px; } .lightsail-overview, .lightsail-tab-content { padding: 14px; } .lightsail-detail-grid { grid-template-columns: 1fr; } .lightsail-delete-confirm { margin: 0 14px 14px; } }
|
||||
|
||||
Reference in New Issue
Block a user