@limrun/ui 0.13.3-rc.1 → 0.13.4

package/src/device-install/demo/demo.css

@@ -0,0 +1,493 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #f4f7fb;
+  color: #111827;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  border-radius: 10px;
+  background: #111827;
+  color: #fff;
+  cursor: pointer;
+  font-weight: 700;
+  padding: 11px 16px;
+}
+
+button:hover:not(:disabled) {
+  background: #253044;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+button.secondary {
+  background: #e5e7eb;
+  color: #111827;
+}
+
+button.secondary:hover:not(:disabled) {
+  background: #d1d5db;
+}
+
+code {
+  border-radius: 6px;
+  background: #eef2ff;
+  color: #3730a3;
+  padding: 1px 5px;
+}
+
+.page {
+  display: grid;
+  gap: 18px;
+  margin: 0 auto;
+  max-width: 1120px;
+  padding: 28px 18px 56px;
+}
+
+.hero {
+  border-radius: 22px;
+  background: linear-gradient(135deg, #1f2937 0%, #4338ca 100%);
+  box-shadow: 0 18px 45px rgb(15 23 42 / 16%);
+  color: #fff;
+  padding: 34px;
+}
+
+.hero h1 {
+  margin: 0;
+  max-width: 820px;
+  font-size: clamp(2rem, 5vw, 3.6rem);
+  letter-spacing: -0.05em;
+  line-height: 0.98;
+}
+
+.hero p {
+  margin: 16px 0 0;
+  max-width: 780px;
+  color: rgb(255 255 255 / 82%);
+  line-height: 1.6;
+}
+
+.eyebrow {
+  color: #c7d2fe !important;
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.18em;
+  margin: 0 0 12px !important;
+  text-transform: uppercase;
+}
+
+.card,
+.error {
+  min-width: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgb(15 23 42 / 7%);
+  padding: 22px;
+}
+
+.card h2,
+.card p {
+  margin: 0;
+}
+
+.card h2 {
+  font-size: 1.18rem;
+  letter-spacing: -0.02em;
+}
+
+.card p,
+.hint {
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+.error {
+  border-color: #fecaca;
+  background: #fff1f2;
+  color: #7f1d1d;
+}
+
+.error pre {
+  margin: 8px 0 0;
+  white-space: pre-wrap;
+}
+
+.errorToast {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: min(680px, calc(100% - 32px));
+  border: 1px solid #fecaca;
+  border-radius: 14px;
+  background: #fff1f2;
+  box-shadow: 0 16px 40px rgb(127 29 29 / 22%);
+  color: #7f1d1d;
+  padding: 14px 16px;
+  transform: translateX(-50%);
+}
+
+.errorToastBody {
+  min-width: 0;
+  flex: 1;
+}
+
+.errorToastBody pre {
+  max-height: 220px;
+  overflow: auto;
+  margin: 6px 0 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.errorToastClose {
+  flex: 0 0 auto;
+  border-radius: 8px;
+  background: rgb(127 29 29 / 8%);
+  color: #7f1d1d;
+  padding: 6px 10px;
+}
+
+.errorToastClose:hover:not(:disabled) {
+  background: rgb(127 29 29 / 16%);
+}
+
+.grid {
+  display: grid;
+  gap: 14px;
+  margin-top: 16px;
+}
+
+.grid.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+label {
+  display: grid;
+  gap: 7px;
+  color: #374151;
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+input {
+  min-width: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  background: #fff;
+  color: #111827;
+  padding: 11px 12px;
+}
+
+select {
+  min-width: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  background: #fff;
+  color: #111827;
+  padding: 11px 12px;
+}
+
+input:focus,
+select:focus {
+  border-color: #4f46e5;
+  box-shadow: 0 0 0 3px rgb(79 70 229 / 15%);
+  outline: none;
+}
+
+.tabs {
+  display: inline-flex;
+  gap: 6px;
+  border-radius: 12px;
+  background: #f3f4f6;
+  margin: 4px 0 16px;
+  padding: 5px;
+}
+
+button.tab {
+  border-radius: 9px;
+  background: transparent;
+  color: #4b5563;
+  padding: 9px 13px;
+}
+
+button.tab.active {
+  background: #fff;
+  box-shadow: 0 1px 5px rgb(15 23 42 / 12%);
+  color: #111827;
+}
+
+.subPanel {
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  background: #fbfdff;
+  margin-top: 16px;
+  padding: 16px;
+}
+
+.sectionHeader.compact {
+  margin-bottom: 10px;
+}
+
+.sectionHeader h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.inlineForm {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.inlineForm input {
+  max-width: 220px;
+}
+
+.multiSelect {
+  min-height: 132px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 16px;
+}
+
+.sectionHeader > div {
+  min-width: 0;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.pill {
+  border-radius: 999px;
+  flex: 0 0 auto;
+  font-size: 0.78rem;
+  font-weight: 800;
+  padding: 7px 11px;
+  text-transform: capitalize;
+}
+
+.pill.neutral {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.pill.active {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.pill.success {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.pill.danger {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.facts {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 18px 0 0;
+}
+
+.facts div {
+  min-width: 0;
+  border-radius: 12px;
+  background: #f9fafb;
+  padding: 12px;
+}
+
+.facts dt {
+  color: #6b7280;
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.facts dd {
+  overflow-wrap: anywhere;
+  margin: 6px 0 0;
+  color: #111827;
+  font-weight: 700;
+}
+
+.logBox {
+  max-height: 260px;
+  min-height: 120px;
+  overflow: auto;
+  border-radius: 12px;
+  background: #111827;
+  color: #d1fae5;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  margin: 16px 0 0;
+  padding: 14px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.activity {
+  display: grid;
+  gap: 10px;
+}
+
+.activityLine {
+  display: grid;
+  gap: 3px;
+  border-radius: 12px;
+  background: #f9fafb;
+  padding: 12px;
+}
+
+.activityLine span {
+  color: #6b7280;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.activityLine pre {
+  margin: 4px 0 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.stepper {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  border: 1px solid #e5e7eb;
+  border-left: 4px solid #d1d5db;
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgb(15 23 42 / 7%);
+  padding: 14px 16px;
+}
+
+.stepDot {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  background: #e5e7eb;
+  color: #374151;
+  font-size: 0.85rem;
+  font-weight: 800;
+}
+
+.stepText {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.stepTitle {
+  font-size: 0.95rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.stepLabel {
+  overflow: hidden;
+  color: #6b7280;
+  font-size: 0.8rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.step.active {
+  border-left-color: #3b82f6;
+}
+
+.step.active .stepDot {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.step.done {
+  border-left-color: #22c55e;
+}
+
+.step.done .stepDot {
+  background: #16a34a;
+  color: #fff;
+}
+
+.step.error {
+  border-left-color: #ef4444;
+}
+
+.step.error .stepDot {
+  background: #dc2626;
+  color: #fff;
+}
+
+@media (max-width: 760px) {
+  .stepper {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid.two,
+  .facts {
+    grid-template-columns: 1fr;
+  }
+
+  .sectionHeader {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .hero,
+  .card,
+  .error {
+    padding: 18px;
+  }
+}