Unify WebPeer visual design

src/apps/webpeer/README.md

@@ -113,7 +113,9 @@ The unit tests are stored in `test/apps/webpeer/`, outside the Community Review
 
 ## Composition
 
-`WebPeerRuntime.ts` owns the browser service composition, local database lifecycle, P2P replicator, and peer actions. `WebPeerPersistence.ts` owns origin-scoped settings persistence, while the shared P2P pane supplies the connection and peer controls. The connection-check modules create an isolated runtime with in-memory test settings and derive user-visible results from Commonlib's browser-side diagnostic events.
+The WebPeer production bundle has two HTML entry points. `index.html` loads `src/main.ts` and the ordinary browser peer, while `check.html` loads `src/check.ts` and the isolated P2P connection check. The ordinary page links to the check, so it is a WebPeer feature without sharing its saved settings or runtime session.
+
+`WebPeerRuntime.ts` owns the browser service composition, local database lifecycle, P2P replicator, and peer actions. `WebPeerPersistence.ts` owns origin-scoped settings persistence, while the shared P2P pane supplies the connection and peer controls. The connection-check modules create an isolated runtime with in-memory test settings and derive user-visible results from Commonlib's browser-side diagnostic events. Both entry points use the same WebPeer visual foundation.
 
 ## Licence
 

src/apps/webpeer/index.html

@@ -6,7 +6,11 @@
   <link rel="icon" type="image/svg+xml" href="icon.svg" />
   <link rel="manifest" href="manifest.json" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Peer-to-Peer Daemon on Browser</title>
+  <meta
+    name="description"
+    content="Run a temporary Self-hosted LiveSync P2P peer and inspect its activity in the browser."
+  />
+  <title>WebPeer · Self-hosted LiveSync</title>
 </head>
 
 <body>
@@ -14,4 +18,4 @@
   <script type="module" src="./src/main.ts"></script>
 </body>
 
-</html>
+</html>

src/apps/webpeer/src/SyncMain.svelte

@@ -26,109 +26,84 @@
     });
 </script>
 
-<main>
+<svelte:head>
-    <div class="control">
+    <meta name="theme-color" content="#12233f" />
-        <div class="connection-check-link">
+</svelte:head>
-            <a href="./check.html">Try the P2P connection check</a>
-        </div>
-        {#await synchronised then activeRuntime}
-            <BrowserP2PTransportSettings host={activeRuntime.paneHost} />
-            <P2PReplicatorPane host={activeRuntime.paneHost}></P2PReplicatorPane>
-        {:catch error}
-            <p>{error instanceof Error ? error.message : String(error)}</p>
-        {/await}
-    </div>
-    <div class="log">
-        <div class="status">
-            {statusLine}
-        </div>
-        <div class="logslist" bind:this={elP}>
-            {#each $logs as log}
-                <p>{log}</p>
-            {/each}
-        </div>
-    </div>
-</main>
 
-<style>
+<main class="webpeer-shell">
-    main {
+    <header class="webpeer-header">
-        display: flex;
+        <div class="brand-lockup">
-        flex-direction: row;
+            <span class="brand-mark" aria-hidden="true"><span></span></span>
-        flex-grow: 1;
+            <span>
-        max-height: 100vh;
+                <small>Self-hosted LiveSync</small>
-        box-sizing: border-box;
+                <strong>WebPeer</strong>
-    }
+                <span class="brand-description">A browser-hosted peer for temporary P2P transfers.</span>
-    @media (max-width: 900px) {
+            </span>
-        main {
+        </div>
-            flex-direction: column;
+
-        }
+        <a
-    }
+            class="connection-check-link"
-    @media (device-orientation: portrait) {
+            href="./check.html"
-        main {
+            aria-label="Try the P2P connection check"
-            flex-direction: column;
+        >
-        }
+            <span class="check-mark" aria-hidden="true">◇</span>
-    }
+            <span>
-    .log {
+                <small>Disposable connectivity check</small>
-        display: flex;
+                <strong>Try the P2P connection check</strong>
-        flex-direction: column;
+            </span>
-        justify-content: flex-start;
+            <span class="check-arrow" aria-hidden="true">→</span>
-        align-items: flex-start;
+        </a>
-        padding: 1em;
+    </header>
-        min-width: 50%;
+
-    }
+    <div class="workspace-grid">
-    @media (max-width: 900px) {
+        <section class="workspace-card control-card" aria-label="WebPeer controls">
-        .log {
+            <div class="panel-meta">
-            max-height: 50vh;
+                <p>Browser peer controls</p>
-        }
+                <span>Stored in this browser</span>
-    }
+            </div>
-    @media (device-orientation: portrait) {
+
-        .log {
+            {#await synchronised then activeRuntime}
-            max-height: 50vh;
+                <P2PReplicatorPane host={activeRuntime.paneHost}></P2PReplicatorPane>
-        }
+                <BrowserP2PTransportSettings host={activeRuntime.paneHost} />
-    }
+            {:catch error}
-    .control {
+                <div class="runtime-error" role="alert">
-        padding: 1em 1em;
+                    <strong>WebPeer could not start</strong>
-        overflow-y: scroll;
+                    <p>{error instanceof Error ? error.message : String(error)}</p>
-        flex-grow: 1;
+                </div>
-    }
+            {/await}
-    .connection-check-link {
+        </section>
-        margin-bottom: 0.75em;
+
-        text-align: left;
+        <aside class="workspace-card log-card" aria-labelledby="activity-heading">
-    }
+            <header class="log-header">
-    .connection-check-link a {
+                <div>
-        display: inline-block;
+                    <p class="section-kicker">Live diagnostics</p>
-        padding: 0.45em 0.75em;
+                    <h2 id="activity-heading">Activity log</h2>
-        border: 1px solid var(--interactive-accent);
+                </div>
-        border-radius: 0.5em;
+                <div class="status-pill" aria-live="polite">
-        color: var(--interactive-accent);
+                    <span aria-hidden="true"></span>
-        text-decoration: none;
+                    {statusLine || "Initialising"}
-    }
+                </div>
-    .connection-check-link a:hover {
+            </header>
-        color: var(--interactive-accent-hover);
+
-        border-color: var(--interactive-accent-hover);
+            <div
-    }
+                class="logslist"
-    .status {
+                bind:this={elP}
-        flex-grow: 0;
+                role="log"
-        /* max-height: 40px; */
+                aria-label="WebPeer activity log"
-        /* height: 40px; */
+            >
-        flex-shrink: 0;
+                {#if $logs.length === 0}
-    }
+                    <p class="empty-log">Waiting for peer activity.</p>
-    .logslist {
+                {:else}
-        display: flex;
+                    {#each $logs as log}
-        flex-direction: column;
+                        <p class="log-entry">{log}</p>
-        justify-content: flex-start;
+                    {/each}
-        align-items: flex-start;
+                {/if}
-        /* padding: 1em; */
+            </div>
-        width: 100%;
+        </aside>
-        overflow-y: scroll;
+    </div>
-        flex-grow: 1;
+
-        flex-shrink: 1;
+    <footer class="webpeer-footer">
-        /* max-height: calc(100% - 40px); */
+        WebPeer is experimental browser software. Keep this page open while it is connected or
-    }
+        transferring changes.
-    p {
+    </footer>
-        margin: 0;
+</main>
-        white-space: pre-wrap;
-        text-align: left;
-        word-break: break-all;
-    }
-</style>

src/apps/webpeer/src/app.css

@@ -1,112 +1,505 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  --background-primary: #ffffff;
-  --background-primary-alt: #e9e9e9;
-  --size-4-1: 0.25em;
-  --tag-background: #f0f0f0;
-  --tag-border-width: 1px;
-  --tag-border-color: #cfffdd;
-  --background-modifier-success: #d4f3e9;
-  --background-secondary: #f0f0f0;
-  --background-modifier-error: #f8d7da;
-  --background-modifier-error-hover: #f5c6cb;
-  --interactive-accent: #007bff;
-  --interactive-accent-hover: #0056b3;
-  --text-normal: #333;
-  --text-warning: #f0ad4e;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  min-width: 320px;
-  min-height: 100vh;
-  box-sizing: border-box;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
 #app {
-  margin: 0;
+    min-height: 100vh;
-  padding: 0;
-  text-align: center;
-  display: flex;
-  flex-grow: 1;
 }
 
-button {
+.webpeer-shell {
-  border-radius: 8px;
+    width: min(92rem, calc(100% - 2rem));
-  border: 1px solid transparent;
+    margin: 0 auto;
-  padding: 0.6em 1.2em;
+    padding: 2rem 0 1.5rem;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
 }
 
-button:hover {
+.webpeer-header {
-  border-color: #646cff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.25rem;
+    margin-bottom: 1.25rem;
+    padding: 1rem 1.1rem 1rem 1.25rem;
+    border: 1px solid rgba(204, 214, 227, 0.9);
+    border-radius: 1.25rem;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(14px);
 }
 
-button:focus,
+.brand-lockup {
-button:focus-visible {
+    display: flex;
-  outline: 4px auto -webkit-focus-ring-color;
+    align-items: center;
+    gap: 0.9rem;
+    min-width: 0;
 }
 
-input,
+.brand-lockup > span:last-child,
-select {
+.connection-check-link > span:nth-child(2) {
-  border-radius: 8px;
+    display: grid;
-  border: 1px solid #1a1a1a;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  transition: border-color 0.25s;
 }
 
-@media (prefers-color-scheme: light) {
+.brand-lockup small,
-  :root {
+.connection-check-link small,
-    color: #213547;
+.section-kicker,
-    background-color: #ffffff;
+.panel-meta p {
-  }
+    color: var(--blue);
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.11em;
+    text-transform: uppercase;
+}
 
-  a:hover {
+.brand-lockup strong {
-    color: #747bff;
+    color: var(--navy);
-  }
+    font-size: 1.45rem;
+    line-height: 1.05;
+    letter-spacing: -0.03em;
+}
 
-  button {
+.brand-description {
-    background-color: #f9f9f9;
+    margin-top: 0.18rem;
-  }
+    overflow: hidden;
-}
+    color: var(--muted);
+    font-size: 0.82rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.brand-mark {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 3.2rem;
+    height: 3.2rem;
+    flex: 0 0 auto;
+    border-radius: 1rem;
+    background: var(--navy);
+    box-shadow: 0 10px 24px rgba(18, 35, 63, 0.2);
+}
+
+.brand-mark::before,
+.brand-mark::after,
+.brand-mark span {
+    position: absolute;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    content: "";
+}
+
+.brand-mark::before {
+    width: 1.6rem;
+    height: 1.6rem;
+    opacity: 0.45;
+}
+
+.brand-mark::after {
+    width: 0.7rem;
+    height: 0.7rem;
+    border-color: #8eb1ff;
+    background: #8eb1ff;
+}
+
+.brand-mark span {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-width: 1px;
+    opacity: 0.28;
+}
+
+.connection-check-link {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.75rem;
+    max-width: 25rem;
+    padding: 0.75rem 0.85rem;
+    color: #ffffff;
+    border-radius: 0.95rem;
+    background: var(--navy);
+    box-shadow: 0 10px 26px rgba(18, 35, 63, 0.16);
+    text-decoration: none;
+    transition:
+        background 140ms ease,
+        transform 140ms ease,
+        box-shadow 140ms ease;
+}
+
+.connection-check-link:hover {
+    color: #ffffff;
+    background: #1d385f;
+    box-shadow: 0 13px 30px rgba(18, 35, 63, 0.22);
+    transform: translateY(-1px);
+}
+
+.connection-check-link small {
+    color: #8eb1ff;
+}
+
+.connection-check-link strong {
+    margin-top: 0.12rem;
+    font-size: 0.9rem;
+    line-height: 1.2;
+}
+
+.check-mark {
+    display: grid;
+    place-items: center;
+    width: 2.15rem;
+    height: 2.15rem;
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    border-radius: 0.7rem;
+    color: #b8ceff;
+    background: rgba(255, 255, 255, 0.08);
+    font-size: 1.15rem;
+}
+
+.check-arrow {
+    color: #b8ceff;
+    font-size: 1.15rem;
+}
+
+.workspace-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.8fr);
+    align-items: start;
+    gap: 1.25rem;
+}
+
+.workspace-card {
+    min-width: 0;
+    border: 1px solid rgba(204, 214, 227, 0.9);
+    border-radius: 1.35rem;
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: var(--shadow);
+}
+
+.control-card {
+    padding: clamp(1.35rem, 3vw, 2rem);
+}
+
+.panel-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1.25rem;
+    padding-bottom: 0.85rem;
+    border-bottom: 1px solid var(--line);
+}
+
+.panel-meta p {
+    margin: 0;
+}
+
+.panel-meta span {
+    padding: 0.35rem 0.55rem;
+    color: #48627f;
+    border: 1px solid #cfdae7;
+    border-radius: 999px;
+    background: #f5f8fb;
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+
+.control-card article {
+    color: var(--ink);
+}
+
+.control-card article > h1 {
+    margin: 0 0 1.15rem;
+    color: var(--navy);
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    line-height: 1;
+    letter-spacing: -0.045em;
+}
+
+.control-card h2 {
+    margin: 1.45rem 0 0.75rem;
+    padding-bottom: 0.45rem;
+    color: var(--navy);
+    border-bottom-color: var(--line);
+    font-size: 1.15rem;
+    letter-spacing: -0.015em;
+}
+
+.control-card p {
+    color: var(--muted);
+    line-height: 1.62;
+}
+
+.control-card .panel-meta p {
+    color: var(--blue);
+    line-height: 1.2;
+}
+
+.control-card details {
+    margin: 0.8rem 0 1rem;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--line);
+    border-radius: 0.9rem;
+    background: var(--surface-subtle);
+}
+
+.control-card details[open] {
+    background: #fbfcfe;
+}
+
+.control-card summary {
+    padding: 0.12rem 0;
+}
+
+.control-card details[open] > summary {
+    margin-bottom: 0.7rem;
+}
+
+.control-card table {
+    width: 100%;
+    border-spacing: 0 0.35rem;
+}
+
+.control-card th,
+.control-card td {
+    padding: 0.55rem 0.4rem;
+    vertical-align: top;
+}
+
+.control-card th {
+    width: 32%;
+    color: #40536b;
+    font-size: 0.82rem;
+    text-align: left;
+}
+
+.control-card td {
+    color: var(--ink);
+}
+
+.control-card input:not([type="checkbox"]):not([type="radio"]) {
+    min-width: min(100%, 18rem);
+    max-width: 100%;
+    color: var(--ink);
+    background: var(--surface);
+}
+
+.control-card input[type="checkbox"] {
+    width: 1.1rem;
+    height: 1.1rem;
+}
+
+.control-card label.is-dirty {
+    border-radius: 0.55rem;
+    background: var(--red-soft);
+}
+
+.control-card .important {
+    color: var(--red);
+}
+
+.control-card .important-sub {
+    color: var(--amber);
+}
+
+.control-card .browser-p2p-transport-settings {
+    margin-top: 1.3rem;
+    padding-top: 0.3rem;
+    border-top: 1px solid var(--line);
+}
+
+.control-card .browser-p2p-transport-settings label {
+    padding: 0.25rem;
+    border-radius: 0.55rem;
+}
+
+.control-card .browser-p2p-transport-settings span {
+    color: #40536b;
+    font-size: 0.82rem;
+    font-weight: 700;
+}
+
+.runtime-error {
+    padding: 1rem;
+    color: var(--red);
+    border: 1px solid #efb1b1;
+    border-radius: 0.9rem;
+    background: var(--red-soft);
+}
+
+.runtime-error p {
+    margin: 0.35rem 0 0;
+}
+
+.log-card {
+    position: sticky;
+    top: 1.25rem;
+    overflow: hidden;
+    background: var(--navy);
+}
+
+.log-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1.25rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.section-kicker {
+    margin: 0 0 0.25rem;
+    color: #8eb1ff;
+}
+
+.log-header h2 {
+    margin: 0;
+    color: #ffffff;
+    font-size: 1.4rem;
+    letter-spacing: -0.025em;
+}
+
+.status-pill {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    max-width: 55%;
+    padding: 0.42rem 0.62rem;
+    overflow: hidden;
+    color: #dbe6f5;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.07);
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.status-pill > span {
+    width: 0.48rem;
+    height: 0.48rem;
+    flex: 0 0 auto;
+    border-radius: 50%;
+    background: #8eb1ff;
+    box-shadow: 0 0 0 0.2rem rgba(142, 177, 255, 0.13);
+}
+
+.logslist {
+    min-height: 34rem;
+    max-height: calc(100vh - 10rem);
+    padding: 1rem 1.1rem 1.2rem;
+    overflow: auto;
+    color: #cad7e8;
+    background:
+        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+        var(--navy);
+    background-size: 100% 1.8rem;
+    scrollbar-color: #4e6280 transparent;
+}
+
+.log-entry,
+.empty-log {
+    margin: 0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+    font-size: 0.72rem;
+    line-height: 1.8rem;
+    text-align: left;
+}
+
+.log-entry {
+    color: #cad7e8;
+}
+
+.empty-log {
+    color: #8294ac;
+}
+
+.webpeer-footer {
+    max-width: 48rem;
+    margin: 1.3rem auto 0;
+    color: var(--muted);
+    font-size: 0.78rem;
+    text-align: center;
+}
+
+@media (max-width: 1050px) {
+    .workspace-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .log-card {
+        position: static;
+    }
+
+    .logslist {
+        min-height: 18rem;
+        max-height: 28rem;
+    }
+}
+
+@media (max-width: 700px) {
+    .webpeer-shell {
+        width: min(100% - 1rem, 46rem);
+        padding-top: 0.5rem;
+    }
+
+    .webpeer-header {
+        align-items: stretch;
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    .connection-check-link {
+        width: 100%;
+        max-width: none;
+    }
+
+    .control-card {
+        padding: 1rem;
+    }
+
+    .control-card table.settings,
+    .control-card table.settings tbody,
+    .control-card table.settings tr,
+    .control-card table.settings th,
+    .control-card table.settings td {
+        display: block;
+        width: 100%;
+    }
+
+    .control-card table.settings tr {
+        padding: 0.6rem 0;
+        border-bottom: 1px solid var(--line);
+    }
+
+    .control-card table.settings th,
+    .control-card table.settings td {
+        min-height: 0;
+        padding: 0.2rem 0;
+    }
+
+    .control-card table.peers {
+        display: block;
+        overflow-x: auto;
+    }
+
+    .panel-meta {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}
+
+@media (max-width: 430px) {
+    .brand-description {
+        white-space: normal;
+    }
+
+    .panel-meta span {
+        border-radius: 0.55rem;
+    }
+
+    .log-header {
+        flex-direction: column;
+    }
+
+    .status-pill {
+        max-width: 100%;
+    }
+}

src/apps/webpeer/src/check.css

@@ -1,76 +1,3 @@
-:root {
-    font-family:
-        Inter,
-        ui-sans-serif,
-        system-ui,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        sans-serif;
-    color: #17253b;
-    background: #f3f6fa;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    --ink: #17253b;
-    --muted: #5d6c80;
-    --line: #d8e0ea;
-    --navy: #12233f;
-    --blue: #2a66dc;
-    --blue-dark: #1e4fae;
-    --blue-soft: #eaf1ff;
-    --green: #14795c;
-    --green-soft: #e5f6ef;
-    --amber: #9c6510;
-    --amber-soft: #fff4d6;
-    --red: #a33a3a;
-    --red-soft: #ffeded;
-    --surface: #ffffff;
-    --shadow: 0 18px 55px rgba(24, 42, 72, 0.08);
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html {
-    min-width: 320px;
-    min-height: 100%;
-    background: radial-gradient(circle at 12% 8%, rgba(66, 117, 222, 0.11), transparent 26rem), #f3f6fa;
-}
-
-body {
-    min-width: 320px;
-    min-height: 100vh;
-    margin: 0;
-}
-
-button,
-input,
-textarea {
-    font: inherit;
-}
-
-button,
-.button-link {
-    min-height: 2.75rem;
-    border-radius: 0.7rem;
-    font-weight: 700;
-}
-
-button {
-    cursor: pointer;
-}
-
-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.58;
-}
-
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
 .setup-card h2:focus-visible {
     outline: 3px solid rgba(42, 102, 220, 0.38);
     outline-offset: 2px;
@@ -702,12 +629,3 @@ footer {
         width: 100%;
     }
 }
-
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        scroll-behavior: auto !important;
-        transition: none !important;
-    }
-}

src/apps/webpeer/src/check.ts

@@ -2,6 +2,7 @@ import { _activeDocument } from "@vrtmrz/livesync-commonlib/compat/common/coreEn
 import { mount } from "svelte";
 
 import P2PCheck from "./P2PCheck.svelte";
+import "./theme.css";
 import "./check.css";
 
 const app = mount(P2PCheck, {

src/apps/webpeer/src/main.ts

@@ -1,4 +1,5 @@
 import { mount } from "svelte";
+import "./theme.css";
 import "./app.css";
 import App from "./App.svelte";
 import { _activeDocument } from "@vrtmrz/livesync-commonlib/compat/common/coreEnvFunctions";

src/apps/webpeer/src/theme.css

@@ -0,0 +1,171 @@
+:root {
+    font-family:
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+    color: #17253b;
+    background: #f3f6fa;
+    line-height: 1.5;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    --ink: #17253b;
+    --muted: #5d6c80;
+    --line: #d8e0ea;
+    --navy: #12233f;
+    --blue: #2a66dc;
+    --blue-dark: #1e4fae;
+    --blue-soft: #eaf1ff;
+    --green: #14795c;
+    --green-soft: #e5f6ef;
+    --amber: #9c6510;
+    --amber-soft: #fff4d6;
+    --red: #a33a3a;
+    --red-soft: #ffeded;
+    --surface: #ffffff;
+    --surface-subtle: #f8fafc;
+    --shadow: 0 18px 55px rgba(24, 42, 72, 0.08);
+
+    /* Browser-hosted aliases required by the shared Obsidian P2P controls. */
+    --background-primary: var(--surface);
+    --background-primary-alt: #edf1f6;
+    --background-secondary: #f2f5f9;
+    --background-modifier-border: var(--line);
+    --background-modifier-success: var(--green-soft);
+    --background-modifier-error: var(--red-soft);
+    --background-modifier-error-hover: #f8dada;
+    --interactive-accent: var(--blue);
+    --interactive-accent-hover: var(--blue-dark);
+    --text-normal: var(--ink);
+    --text-muted: var(--muted);
+    --text-error: var(--red);
+    --text-warning: var(--amber);
+    --input-height: 2.75rem;
+    --size-4-1: 0.25rem;
+    --tag-background: #f0f3f7;
+    --tag-border-width: 1px;
+    --tag-border-color: var(--line);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    min-width: 320px;
+    min-height: 100%;
+    color: var(--ink);
+    background:
+        radial-gradient(circle at 12% 8%, rgba(66, 117, 222, 0.11), transparent 26rem),
+        #f3f6fa;
+}
+
+body {
+    min-width: 320px;
+    min-height: 100vh;
+    margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+button,
+.button-link {
+    min-height: 2.75rem;
+    border-radius: 0.7rem;
+    font-weight: 700;
+}
+
+button {
+    border: 1px solid #bdc9d8;
+    padding: 0.68rem 1rem;
+    color: #26405e;
+    background: var(--surface);
+    cursor: pointer;
+    transition:
+        border-color 140ms ease,
+        color 140ms ease,
+        background 140ms ease,
+        transform 140ms ease;
+}
+
+button:hover:not(:disabled) {
+    border-color: var(--blue);
+    color: var(--blue-dark);
+}
+
+button.mod-cta {
+    color: #ffffff;
+    border-color: var(--blue);
+    background: var(--blue);
+    box-shadow: 0 8px 20px rgba(42, 102, 220, 0.18);
+}
+
+button.mod-cta:hover:not(:disabled) {
+    color: #ffffff;
+    border-color: var(--blue-dark);
+    background: var(--blue-dark);
+}
+
+button:disabled {
+    cursor: not-allowed;
+    opacity: 0.58;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+summary:focus-visible,
+textarea:focus-visible {
+    outline: 3px solid rgba(42, 102, 220, 0.38);
+    outline-offset: 2px;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+    border: 1px solid #bdc9d8;
+    border-radius: 0.65rem;
+    padding: 0.68rem 0.8rem;
+    color: var(--ink);
+    background: var(--surface);
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    accent-color: var(--blue);
+}
+
+a {
+    color: var(--blue);
+}
+
+summary {
+    color: var(--navy);
+    cursor: pointer;
+    font-weight: 750;
+}
+
+::selection {
+    color: var(--navy);
+    background: #cddcff;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        scroll-behavior: auto !important;
+        transition: none !important;
+    }
+}