chore: update styles like other examples

examples/nextjs-13/.gitignore

@@ -1,35 +1,14 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
 /node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
 /.next/
 /out/
-
-# production
 /build
-
-# misc
 .DS_Store
 *.pem
-
-# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# local env files
 .env*.local
-
-# vercel
 .vercel
-
-# typescript
 *.tsbuildinfo
 next-env.d.ts

examples/nextjs-13/app/MuxUploader/page.js

@@ -0,0 +1,11 @@
+import MuxUploader from '@mux/mux-uploader-react/rsc';
+
+export default function Home() {
+  return (
+    <main>
+      <div>
+        <MuxUploader />
+      </div>
+    </main>
+  )
+}

examples/nextjs-13/app/globals.css

@@ -1,107 +1,173 @@
 :root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
+  --links: rgb(223, 40, 104);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
+body {
+  padding: 0 1rem;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
+header {
+  padding: 2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left-header,
+.right-header {
+  display: flex;
+  align-items: center;
+}
+
+.mux-logo picture {
+  display: inline-block;
+  width: 81px;
+}
+
+.github-logo {
+  display: inline-block;
+  width: 26px;
+  height: 26px;
+}
+
+header h1 {
   margin: 0;
+  margin-left: .9em;
+  margin-right: .9em;
 }
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
+h1 {
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.2em;
+  font-size: 18px;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+h1 a {
+  color: var(--text-main);
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-gap: 1.5rem;
+}
+
+nav li {
+  position: relative;
+}
+
+nav li a {
+  color: var(--text-main);
+  font-family: monospace;
+  font-size: 16px;
+  padding: 2rem;
+  height: calc(100% - 4rem);
+  display: flex;
+  align-items: center;
+}
+
+li a.video {
+  background: rgba(28, 160, 253, .1);
+}
+
+li a.audio {
+  background: rgba(251, 80, 29, .08);
+}
+
+li a.player {
+  background: rgba(31, 195, 168, .1);
+}
+
+li a.uploader {
+  background: rgba(150, 32, 216, .1);
+}
+
+@media (prefers-color-scheme:dark) {
+  body {
+    background: var(--background-alt);
+  }
+  .github-logo {
+    filter: invert(1) saturate(0);
+  }
+}
+
+mux-player:not([audio]),
+mux-video:not([audio]),
+video {
+  width: 100%;
+  display: block;
+  line-height: 0;
+  margin-bottom: 1rem;
+  background: #000;
+  aspect-ratio: 16 / 9;
+}
+
+mux-player,
+mux-video,
+mux-audio,
+audio {
+  width: 100%;
+  display: block;
+  line-height: 0;
+  margin-bottom: 1rem;
+}
+
+.options {
+  overflow: auto;
+  max-height: calc(100vh - calc(var(--player-height, 450px) + 201px));
+  min-height: 400px;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+.options > div {
+  padding: 5px 10px;
+  min-height: 25px;
+  display: flex;
+  align-items: center;
+}
+
+.options > div :is(input, select) {
+  margin-left: 5px;
+}
+
+.options > div:nth-of-type(odd) {
+  background-color: #e9e9f9;
+}
+
+input[type=text],
+input[type=url],
+select {
+  flex-grow: 1;
 }
 
 @media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
+  .options > div:nth-of-type(odd) {
+    background-color: #3b3b3b;
   }
 }
+
+div.code-renderer {
+  background-color: lightgrey;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.code-renderer pre {
+  width: 100%;
+  overflow: hidden;
+}
+
+div.url-renderer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.url-renderer a {
+  padding-block: 5px;
+  width: 100%;
+  overflow: scroll;
+  max-height: 100px;
+}