mirror of
https://github.com/vrtmrz/obsidian-livesync.git
synced 2026-08-29 06:47:06 +00:00
Unify WebPeer visual design
This commit is contained in:
vorotamoroz
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -26,109 +26,84 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="control">
|
||||
<div class="connection-check-link">
|
||||
<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>
|
||||
<svelte:head>
|
||||
<meta name="theme-color" content="#12233f" />
|
||||
</svelte:head>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
max-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media (device-orientation: portrait) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.log {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 1em;
|
||||
min-width: 50%;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.log {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
@media (device-orientation: portrait) {
|
||||
.log {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
.control {
|
||||
padding: 1em 1em;
|
||||
overflow-y: scroll;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.connection-check-link {
|
||||
margin-bottom: 0.75em;
|
||||
text-align: left;
|
||||
}
|
||||
.connection-check-link a {
|
||||
display: inline-block;
|
||||
padding: 0.45em 0.75em;
|
||||
border: 1px solid var(--interactive-accent);
|
||||
border-radius: 0.5em;
|
||||
color: var(--interactive-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
.connection-check-link a:hover {
|
||||
color: var(--interactive-accent-hover);
|
||||
border-color: var(--interactive-accent-hover);
|
||||
}
|
||||
.status {
|
||||
flex-grow: 0;
|
||||
/* max-height: 40px; */
|
||||
/* height: 40px; */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.logslist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
/* padding: 1em; */
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
/* max-height: calc(100% - 40px); */
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
text-align: left;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
<main class="webpeer-shell">
|
||||
<header class="webpeer-header">
|
||||
<div class="brand-lockup">
|
||||
<span class="brand-mark" aria-hidden="true"><span></span></span>
|
||||
<span>
|
||||
<small>Self-hosted LiveSync</small>
|
||||
<strong>WebPeer</strong>
|
||||
<span class="brand-description">A browser-hosted peer for temporary P2P transfers.</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="connection-check-link"
|
||||
href="./check.html"
|
||||
aria-label="Try the P2P connection check"
|
||||
>
|
||||
<span class="check-mark" aria-hidden="true">◇</span>
|
||||
<span>
|
||||
<small>Disposable connectivity check</small>
|
||||
<strong>Try the P2P connection check</strong>
|
||||
</span>
|
||||
<span class="check-arrow" aria-hidden="true">→</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<div class="workspace-grid">
|
||||
<section class="workspace-card control-card" aria-label="WebPeer controls">
|
||||
<div class="panel-meta">
|
||||
<p>Browser peer controls</p>
|
||||
<span>Stored in this browser</span>
|
||||
</div>
|
||||
|
||||
{#await synchronised then activeRuntime}
|
||||
<P2PReplicatorPane host={activeRuntime.paneHost}></P2PReplicatorPane>
|
||||
<BrowserP2PTransportSettings host={activeRuntime.paneHost} />
|
||||
{:catch error}
|
||||
<div class="runtime-error" role="alert">
|
||||
<strong>WebPeer could not start</strong>
|
||||
<p>{error instanceof Error ? error.message : String(error)}</p>
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
|
||||
<aside class="workspace-card log-card" aria-labelledby="activity-heading">
|
||||
<header class="log-header">
|
||||
<div>
|
||||
<p class="section-kicker">Live diagnostics</p>
|
||||
<h2 id="activity-heading">Activity log</h2>
|
||||
</div>
|
||||
<div class="status-pill" aria-live="polite">
|
||||
<span aria-hidden="true"></span>
|
||||
{statusLine || "Initialising"}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="logslist"
|
||||
bind:this={elP}
|
||||
role="log"
|
||||
aria-label="WebPeer activity log"
|
||||
>
|
||||
{#if $logs.length === 0}
|
||||
<p class="empty-log">Waiting for peer activity.</p>
|
||||
{:else}
|
||||
{#each $logs as log}
|
||||
<p class="log-entry">{log}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<footer class="webpeer-footer">
|
||||
WebPeer is experimental browser software. Keep this page open while it is connected or
|
||||
transferring changes.
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
+492
-99
@@ -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;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
.webpeer-shell {
|
||||
width: min(92rem, calc(100% - 2rem));
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0 1.5rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
.webpeer-header {
|
||||
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,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.25s;
|
||||
.brand-lockup > span:last-child,
|
||||
.connection-check-link > span:nth-child(2) {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.brand-lockup small,
|
||||
.connection-check-link small,
|
||||
.section-kicker,
|
||||
.panel-meta p {
|
||||
color: var(--blue);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
.brand-lockup strong {
|
||||
color: var(--navy);
|
||||
font-size: 1.45rem;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
.brand-description {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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, {
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user