Create live editor stylesheet

packages/realtime-compiler/resources/live-edit.css

@@ -0,0 +1,63 @@
+#live-editor {
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    border: none;
+    outline: none;
+    font-family: 'Source Code Pro', monospace;
+    padding: 1rem;
+    white-space: pre-line;
+}
+
+#live-editor:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 calc(1px + 0px) rgba(37, 99, 235, 1), 0 0 #0000;
+    border-color: #2563eb;
+}
+
+#live-edit-container header {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#live-edit-container menu button {
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+#liveEditCancel {
+    background-color: #e5e7eb;
+    border-color: #e5e7eb;
+    color: #1f2937;
+    margin-right: 0.35rem;
+}
+
+#liveEditCancel:hover {
+    background-color: #d1d5db;
+    border-color: #d1d5db;
+    color: #1f2937;
+}
+
+#liveEditSubmit {
+    background-color: #2563eb;
+    border-color: #2563eb;
+    color: #fff;
+}
+
+#liveEditSubmit:hover {
+    background-color: #1d4ed8;
+    border-color: #1d4ed8;
+    color: #fff;
+}