Zakaria/floci-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

small feat: svg animation for servers, codebuild, codePipleline etc...

Browse Source
This commit is contained in:
Zakaria
2026-10-15 10:25:16 -04:00
parent ca1e845cb6
commit 668911ed6e
29 changed files with 10034 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/index.css
+205 -8
View File
@@ -976,6 +976,21 @@ pre,
.workflow-studio > .dynamic-stage-header { min-height: 58px; margin: 0; padding: 9px 18px; border-bottom: 1px solid var(--border); }
.workflow-studio > .dynamic-stage-header h3 { margin: 1px 0 0; font-size: 15px; }
.workflow-studio > .compact-text { margin: 0; padding: 7px 18px; border-bottom: 1px solid var(--border-faint); }
.codebuild-progress { display: flex; align-items: center; gap: 18px; margin: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--link) 42%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--link) 6%, var(--surface)); }
.codebuild-progress h3 { margin: 3px 0 0; color: var(--text-bright); font-size: 14px; }
.codebuild-progress p:last-child { margin: 5px 0 0; }
.codebuild-progress-art { width: 112px; height: 103px; flex: 0 0 auto; overflow: visible; }
.pipeline-release-progress { display: flex; align-items: center; gap: 18px; margin: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, #e38c6c 46%, var(--border)); border-radius: 10px; background: color-mix(in srgb, #e38c6c 8%, var(--surface)); }
.pipeline-release-progress h3 { margin: 3px 0 0; color: var(--text-bright); font-size: 14px; }
.pipeline-release-progress p:last-child { margin: 5px 0 0; }
.pipeline-release-art { width: 112px; height: 112px; flex: 0 0 auto; overflow: visible; }
.codebuild-art-outline { stroke: #050505; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.codebuild-art-binary { font-family: Arial, sans-serif; font-size: 51px; font-weight: 600; fill: #43bed0; }
.codebuild-art-gear { transform-box: fill-box; transform-origin: center; animation: codebuild-gear-spin 4s linear infinite; }
@keyframes codebuild-gear-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .codebuild-art-gear { animation: none; } .codebuild-art-binary animate { display: none; } }
@media (max-width: 520px) { .codebuild-progress { align-items: flex-start; margin: 12px; padding: 14px; } .codebuild-progress-art { width: 76px; height: 70px; } }
@media (max-width: 520px) { .pipeline-release-progress { align-items: flex-start; margin: 12px; padding: 14px; } .pipeline-release-art { width: 76px; height: 76px; } }
.workflow-studio-actions { display: flex; align-items: center; gap: 8px; }
.workflow-save-definition { min-height: 30px; border-color: var(--workflow-save-border); background: var(--workflow-save-bg); color: var(--workflow-save-text); font-size: 11px; }
.workflow-save-definition:not(:disabled):hover { border-color: var(--workflow-save-hover-border); background: var(--workflow-save-hover-bg); }
@@ -2881,6 +2896,8 @@ pre,
align-items: start;
}
.ec2-launch-form { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.launch-form-group {
grid-column: 1 / -1;
display: flex;
@@ -2894,11 +2911,87 @@ pre,
margin-top: 6px;
}
.launch-form-group::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
.launch-form-group::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.launch-form-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding-bottom: 4px;
}
.launch-form-header h3,
.launch-form-header p { margin-bottom: 0; }
.launch-form-header > span {
flex: 0 0 auto;
padding: 5px 9px;
border: 1px solid color-mix(in srgb, var(--link) 36%, var(--border));
border-radius: 999px;
background: color-mix(in srgb, var(--link) 9%, var(--surface));
color: var(--link);
font-size: 10px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.launch-stepper {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
overflow-x: auto;
}
.launch-stepper button {
display: flex;
align-items: center;
gap: 8px;
min-width: 145px;
padding: 9px 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text-3);
font: inherit;
font-size: 11px;
font-weight: 600;
text-align: left;
}
.launch-stepper button:not(:disabled) { cursor: pointer; }
.launch-stepper button:disabled { opacity: .58; }
.launch-stepper button.active { border-color: color-mix(in srgb, var(--link) 52%, var(--border)); background: color-mix(in srgb, var(--link) 8%, var(--surface)); color: var(--text); }
.launch-stepper b { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--raised); color: var(--text-3); font-size: 10px; }
.launch-stepper button.active b { background: var(--link); color: #fff; }
.launch-form-section {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.launch-section-title {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 10px;
background: color-mix(in srgb, var(--surface) 94%, var(--bg));
}
.launch-section-title > svg { flex: 0 0 auto; margin-top: 1px; color: var(--link); }
.launch-section-title h4 { margin: 0; color: var(--text-bright); font-size: 13px; }
.launch-section-title p { margin: 3px 0 0; color: var(--text-3); font-size: 11px; line-height: 1.4; }
.launch-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 22px;
align-items: start;
}
.launch-field {
@@ -2913,6 +3006,14 @@ pre,
text-transform: uppercase;
}
.ec2-launch-form .launch-field { gap: 8px; min-width: 0; }
.ec2-launch-form .launch-field > span { letter-spacing: .025em; text-transform: none; }
.ec2-launch-form .launch-field .input,
.ec2-launch-form .launch-field .textarea,
.ec2-launch-form .launch-field select { width: 100%; min-width: 0; }
.ec2-launch-form .launch-field .input { min-height: 38px; }
.ec2-launch-form .launch-field small { color: var(--text-3); font-size: 10px; line-height: 1.4; }
.launch-field--span {
grid-column: 1 / -1;
}
@@ -2927,6 +3028,25 @@ pre,
border-top: 1px solid var(--border);
}
.ec2-launch-form .launch-form-actions { margin-top: 0; padding-top: 4px; border-top: 0; }
.launch-choice-row { display: flex; gap: 8px; }
.launch-choice-row label { display: flex; flex: 1; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 11px; cursor: pointer; }
.launch-choice-row input { accent-color: var(--link); }
.launch-key-create { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; }
.launch-key-create .button.primary { grid-column: 1 / -1; justify-self: start; }
.launch-review { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.launch-review .meta-grid { margin-top: 2px; }
@media (max-width: 720px) {
.launch-form-grid { grid-template-columns: 1fr; }
.ec2-launch-form .launch-field--span { grid-column: auto; }
.launch-stepper { grid-template-columns: repeat(4, minmax(145px, 1fr)); }
.launch-form-header { gap: 12px; }
.launch-key-create { grid-template-columns: 1fr; }
.launch-key-create .button.primary { grid-column: auto; }
}
.ami-catalog {
display: grid;
gap: 12px;
@@ -3414,6 +3534,35 @@ pre,
min-width: 0;
}
.msk-workspace { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.msk-service-section { border-radius: 10px; }
.msk-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, var(--bg)); }
.msk-section-heading { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.msk-section-heading > span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--link) 30%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--link) 9%, var(--surface)); color: var(--link); }
.msk-section-heading h3 { margin: 2px 0 0; color: var(--text-bright); font-size: 13px; }
.msk-section-heading p:last-child { margin: 4px 0 0; }
.msk-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-items: start; padding: 18px; }
.msk-form .dynamic-field { gap: 8px; }
.msk-form .dynamic-field > span { letter-spacing: .025em; text-transform: none; }
.msk-form .input { width: 100%; min-width: 0; min-height: 38px; }
.msk-form .subnet-multiselect { min-height: 88px; }
.msk-form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.msk-form-actions > span { margin-right: auto; color: var(--text-3); font-size: 10px; line-height: 1.4; }
.msk-active-resource { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.msk-active-resource .dynamic-field { gap: 8px; }
.msk-resource-list { display: grid; gap: 6px; padding: 0 18px 18px; }
.msk-resource-list > .compact-text { margin: 0; padding: 10px 0; }
.msk-lag-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.msk-lag-form .msk-form-actions { grid-column: auto; }
.msk-error { margin: 0 18px 18px; }
@media (max-width: 720px) {
.msk-form, .msk-lag-form { grid-template-columns: minmax(0, 1fr); }
.msk-form .dynamic-field--span, .msk-form-actions, .msk-lag-form .msk-form-actions { grid-column: auto; }
.msk-active-resource { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.msk-section-header { gap: 12px; }
}
.sns-topic-summary {
display: flex;
justify-content: space-between;
@@ -4881,6 +5030,34 @@ button.console-service-card {
gap: 14px;
}
.codedeploy-create-form { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.codedeploy-form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 4px; }
.codedeploy-form-header h3, .codedeploy-form-header p { margin-bottom: 0; }
.codedeploy-form-header > span { flex: 0 0 auto; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--link) 36%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--link) 9%, var(--surface)); color: var(--link); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.codedeploy-form-section { display: flex; flex-direction: column; gap: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 94%, var(--bg)); }
.codedeploy-section-title { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.codedeploy-section-title > svg { flex: 0 0 auto; margin-top: 1px; color: var(--link); }
.codedeploy-section-title h4 { margin: 0; color: var(--text-bright); font-size: 13px; }
.codedeploy-section-title p { margin: 3px 0 0; color: var(--text-3); font-size: 11px; line-height: 1.4; }
.codedeploy-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; align-items: start; }
.codedeploy-form-grid .dynamic-field { gap: 8px; }
.codedeploy-form-grid .dynamic-field > span { letter-spacing: .025em; text-transform: none; }
.codedeploy-form-grid .input { min-height: 38px; }
.codedeploy-listener-field { grid-column: 1 / -1; }
.codedeploy-target-card { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.codedeploy-target-card b { width: max-content; padding: 3px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.codedeploy-target-card.blue { border-color: color-mix(in srgb, #45b5fa 42%, var(--border)); }
.codedeploy-target-card.blue b { background: color-mix(in srgb, #45b5fa 18%, var(--surface)); color: #2398df; }
.codedeploy-target-card.green { border-color: color-mix(in srgb, #62c9aa 48%, var(--border)); }
.codedeploy-target-card.green b { background: color-mix(in srgb, #62c9aa 18%, var(--surface)); color: #278f70; }
.codedeploy-rollback { display: flex; align-items: flex-start; gap: 10px; min-height: 38px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.codedeploy-rollback input { margin-top: 2px; accent-color: var(--link); }
.codedeploy-rollback span, .codedeploy-rollback strong, .codedeploy-rollback small { display: block; }
.codedeploy-rollback strong { color: var(--text); font-size: 11px; }
.codedeploy-rollback small { margin-top: 3px; color: var(--text-3); font-size: 10px; line-height: 1.35; }
.codedeploy-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
@media (max-width: 720px) { .codedeploy-form-grid { grid-template-columns: 1fr; } .codedeploy-listener-field { grid-column: auto; } .codedeploy-form-header { gap: 12px; } }
.ec2-readiness-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -4914,6 +5091,25 @@ button.console-service-card {
color: var(--status-error);
}
.ec2-readiness-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ec2-launch-cpu { width: 42px; height: 42px; flex: 0 0 auto; }
.ec2-cpu-pins { fill: none; stroke: #17162b; stroke-width: 2; stroke-linecap: round; }
.ec2-launch-cpu.active .ec2-cpu-pins { animation: ec2-cpu-pin 1.2s ease-in-out infinite; }
.ec2-cpu-chip { fill: #45b5fa; stroke: #17162b; stroke-width: 2.5; }
.ec2-cpu-label { font: 25px Arial, sans-serif; fill: #17162b; letter-spacing: 4px; }
.ec2-cpu-pulse { fill: none; stroke: #8bd6ff; stroke-width: 2; opacity: 0; transform-origin: 67px 66px; }
.ec2-launch-cpu.active .ec2-cpu-pulse { animation: ec2-cpu-pulse 1.8s ease-out infinite; }
.ec2-cpu-dots { fill: #17162b; }
.ec2-ssh-heartbeat { width: 72px; height: 25px; overflow: visible; }
.ec2-ssh-heartbeat path { fill: none; stroke: var(--text-3); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ec2-ssh-heartbeat.active path { stroke: #ef5b5b; stroke-dasharray: 118; animation: ec2-ekg-trace 1.55s linear infinite; }
.ec2-key-ready { width: 45px; height: 45px; margin: -4px -4px -8px 0; }
@keyframes ec2-cpu-pin { 0%, 100% { stroke: #17162b; } 50% { stroke: #45b5fa; } }
@keyframes ec2-cpu-pulse { 0% { opacity: .8; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes ec2-ekg-trace { from { stroke-dashoffset: 118; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ec2-launch-cpu.active .ec2-cpu-pins, .ec2-launch-cpu.active .ec2-cpu-pulse, .ec2-ssh-heartbeat.active path { animation: none; } }
.ec2-connect-error,
.ec2-check-result {
display: flex;
@@ -5908,11 +6104,11 @@ button.console-service-card {
.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-art { 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-art { 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; }
@@ -5921,11 +6117,12 @@ button.console-service-card {
.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-art, .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); } }
.target-health-table table { min-width: 860px; table-layout: fixed; }.target-health-table th, .target-health-table td { padding: 14px 16px; vertical-align: middle; }.target-health-table th:nth-child(1) { width: 215px; }.target-health-table th:nth-child(2) { width: 70px; }.target-health-table th:nth-child(3) { width: 145px; }.target-health-table th:nth-child(4) { width: 170px; }.target-health-table th:last-child { width: 48px; }.target-health-table code { font-size: 12px; }.target-state { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-transform: capitalize; }.target-state-icon { display: inline-block; width: 48px; height: 38px; flex: 0 0 auto; }.target-state-icon svg { width: 100%; height: 100%; }.target-state-icon--checking { animation: target-checking 1.2s ease-in-out infinite; }.target-state-icon--unhealthy { color: #cc3d3d; } @keyframes target-checking { 50% { opacity: .4; } }
@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; }