feat: move css from started kit to sdk

Author: nifalconi

assets/components/core-components.css

@@ -168,12 +168,16 @@ table.table.table-zebra td {
 }
 
 #flash-info,
-#flash-error {
+#flash-error,
+#flash-client-error,
+#flash-server-error {
   @apply fixed top-4 right-4 z-50 w-96;
 }
 
 #flash-info .alert,
-#flash-error .alert {
+#flash-error .alert,
+#flash-client-error .alert,
+#flash-server-error .alert {
   @apply bg-white rounded-lg shadow-lg border-l-4 p-4 w-full;
   @apply flex items-start justify-between gap-4;
   border: none;
@@ -184,51 +188,68 @@ table.table.table-zebra td {
   @apply border-l-success-300;
 }
 
-#flash-error .alert {
+#flash-error .alert,
+#flash-client-error .alert,
+#flash-server-error .alert {
   @apply border-l-danger-300;
 }
 
-#flash-error .alert svg {
+#flash-error .alert svg,
+#flash-client-error .alert svg,
+#flash-server-error .alert svg {
   @apply text-danger-300;
 }
 
 #flash-info .alert p:first-of-type,
-#flash-error .alert p:first-of-type {
+#flash-error .alert p:first-of-type,
+#flash-client-error .alert p:first-of-type,
+#flash-server-error .alert p:first-of-type {
   @apply font-bold text-neutrals-350 mb-1;
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
 }
-
 #flash-info .alert p:last-of-type,
-#flash-error .alert p:last-of-type {
+#flash-error .alert p:last-of-type,
+#flash-client-error .alert p:last-of-type,
+#flash-server-error .alert p:last-of-type {
   @apply text-sm text-neutrals-300;
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
 }
 
 #flash-info .alert svg,
-#flash-error .alert svg {
+#flash-error .alert svg,
+#flash-client-error .alert svg,
+#flash-server-error .alert svg {
   @apply w-5 h-5 flex-shrink-0 mt-0.5;
 }
 
 #flash-info .alert button,
-#flash-error .alert button {
+#flash-error .alert button,
+#flash-client-error .alert button,
+#flash-server-error .alert button {
   @apply text-gray-400 hover:text-gray-600 transition-colors duration-200 flex-shrink-0;
 }
 
 #flash-info .alert button svg,
-#flash-error .alert button svg {
+#flash-error .alert button svg,
+#flash-client-error .alert button svg,
+#flash-server-error .alert button svg {
   @apply w-5 h-5;
 }
 
 #flash-info .alert span.hero-information-circle,
-#flash-error .alert span.hero-exclamation-circle {
+#flash-error .alert span.hero-exclamation-circle,
+#flash-client-error .alert span.hero-exclamation-circle,
+#flash-server-error .alert span.hero-exclamation-circle {
   display: none !important;
 }
 
 #flash-info .alert button span,
-#flash-error .alert button span {
+#flash-error .alert button span,
+#flash-client-error .alert button span,
+#flash-server-error .alert button span {
   display: inline !important;
 }

assets/theme/theme.css

@@ -20,6 +20,43 @@
   background-color: var(--color-neutrals-0, white) !important;
 }
 
+/* Standalone app margins - only apply when not in iframe */
+body.standalone {
+  padding: 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Ensure iframe content has no extra padding */
+body.in-iframe {
+  padding: 0;
+  max-width: none;
+  margin: 0;
+}
+
+/* Additional responsive margins for standalone mode */
+@media (min-width: 768px) {
+  body.standalone {
+    padding: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  body.standalone {
+    padding: 3rem;
+  }
+}
+
+/* Add variants based on LiveView classes */
+@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
+@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
+@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
+
+/* Make LiveView wrapper divs transparent for layout */
+[data-phx-session] {
+  display: contents;
+}
+
 @theme interactions {
   --color-interaction-100: #e9edfd;
   --color-interaction-200: #90a1ee;